比如 animationend 就有几种： webkitAnimationEnd/oAnimationEnd/MSAnimationEnd/animationend ，这样应该怎么写兼容的代码？或者是优雅降级的代码

比如 requestAnimationFrame 和 cancelRequestAnimFrame 可以这样写，但是 animationend 这样写不行...

 window.requestAnimationFrame = (function(){
    return  window.requestAnimationFrame   ||  //Chromium
        window.webkitRequestAnimationFrame ||  //Webkit
        window.mozRequestAnimationFrame    || //Mozilla Geko
        window.oRequestAnimationFrame      || //Opera Presto
        window.msRequestAnimationFrame     || //IE Trident?
        function(callback, element){ //Fallback function
            console.log("Fallback");
            return window.setTimeout(callback, 1000/30);
        }

})();

window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame          ||
        window.webkitCancelRequestAnimationFrame||
        window.mozCancelRequestAnimationFrame   ||
        window.oCancelRequestAnimationFrame     ||
        window.msCancelRequestAnimationFrame    ||
        clearTimeout
} )();

根据 dolymood 的方法，加上我wiki了一下，整理出一个可以判断浏览器前缀的方法，当然，使用 limichange 提到的 Modernizr.prefixed 也很方便。

 var animEndEventNames = {
        'webkit' : 'webkitAnimationEnd',
        'o' : 'oAnimationEnd',
        'ms' : 'MSAnimationEnd',
        'animation' : 'animationend'
    },
    animEndEventName = animEndEventNames[prefix().lowercase]||animEndEventNames['animation'];

function prefix(){
    var styles = getCompStyle(document.documentElement),
        pre = (Array.prototype.slice.call(styles).join('')
            .match(/-(moz|webkit|ms)-/) || ['', 'o']
        )[1],
        dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
    };
};

function getCompStyle(elem,classes){
    return (window.getComputedStyle?window.getComputedStyle(elem,classes||null):elem.currentStyle) || null;
}