js的html5方法有些有前缀，如何写兼容的代码？

Question

比如animationend就有几种：webkitAnimationEnd/oAnimationEnd/MSAnimationEnd/animationend，这样应该怎么写兼容的代码？或者是优雅降级的代码
比如requestAnimationFrame和cancelRequestAnimFrame可以这样写，但是animationend这样写不行...
window.requestAnimationFrame=(function(){
returnwindow.requestAnimationFrame||//Chromium
window.webkitRequestAnimationFrame||//Webkit
window.mozRequestAnimationFrame||//MozillaGeko
window.oRequestAnimationFrame||//OperaPresto
window.msRequestAnimationFrame||//IETrident?
function(callback,element){//Fallbackfunction
console.log("Fallback");
returnwindow.setTimeout(callback,1000/30);
}
})();
window.cancelRequestAnimFrame=(function(){
returnwindow.cancelAnimationFrame||
window.webkitCancelRequestAnimationFrame||
window.mozCancelRequestAnimationFrame||
window.oCancelRequestAnimationFrame||
window.msCancelRequestAnimationFrame||
clearTimeout
})();
根据dolymood的方法，加上我wiki了一下，整理出一个可以判断浏览器前缀的方法，当然，使用limichange提到的Modernizr.prefixed也很方便。
varanimEndEventNames={
'webkit':'webkitAnimationEnd',
'o':'oAnimationEnd',
'ms':'MSAnimationEnd',
'animation':'animationend'
},
animEndEventName=animEndEventNames[prefix().lowercase]||animEndEventNames['animation'];
functionprefix(){
varstyles=getCompStyle(document.documentElement),
pre=(Array.prototype.slice.call(styles).join('')
.match(/-(moz|webkit|ms)-/)||['','o']
)[1],
dom=('WebKit|Moz|MS|O').match(newRegExp('('+pre+')','i'))[1];
return{
dom:dom,
lowercase:pre,
css:'-'+pre+'-',
js:pre[0].toUpperCase()+pre.substr(1)
};
};
functiongetCompStyle(elem,classes){
return(window.getComputedStyle?window.getComputedStyle(elem,classes||null):elem.currentStyle)||null;
}