javascript检测浏览器是否支持某些事件

响应式页面越来越流行，所以现在很多交互都需要通过判断浏览器是否支持某种事件，再去监听不同的事件实现的，

比如 ： touchstart、touchmove、touchend 与 mousedown、mousemove、mouseup

移动端我们就用touch类的事件 代替 mouse 类的事件，以下我们一起来探讨一下如何准确地获取各类事件

为确保准确性，没有比生成一个空的元素，做特性检测更靠谱的了

1.使用 in 运算符，检测对象中是否存在事件

var div = document.createElement('div'),
//是否支持触摸事件
supportTouch = 'ontouchstart' in div,
//是否支持方向转换事件
supportOtc = 'onorientationchange' in window;

2.通过元素的style属性匹配出事件

此方法适合于获取一些跟css相关的事件，如animation、transition

以animationend为例，我们知道根据不同的浏览器会有以下几种

‘animationend’、’webkitAnimationEnd’、’oAnimationEnd’、’MSAnimationEnd’、’mozAnimationEnd’

这类事件我建议用元素的style属性获取，为啥呢？

按照以前的话，个个浏览器都有自己的一套，

比如通过判断当前为chrome、safari用webkitAnimationEnd,

firefox用mozAnimationEnd…

但现在各个浏览器都向规范靠拢了。

通过方法一轮询？

我们测试一下

var i,
re = /^on[a-zA-z]*?[aA]nimation/
for ( i in window ) {
if ( re.test(i) ) {
document.write( i + '<br />')
}
}

chrome下面可以找到 ‘onwebkitanimationend’ 的,

firefox 36.0.4 压根没找到相关的

firefox不支持 animationend 事件吗？用jquery测试一下

$(window).on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd mozAnimationEnd',function(e) {
console.log(e.type);
//firefox 36.0.4打印的是 animationend
});

根据这样我们可以肯定新版的firefox已经向标准靠拢了

而通过style

var i,
re_forStyle = /animation/i;
for ( i in style ) {
if ( re_forStyle.test(i) ) {
document.write( i + '<br />')
}
}

我们可以获知

chrome[41.0.2272.118]、opera[28.0.1750.51]、safari for window[5.1.7] 用的是 webkitAnimation

firefox 36.0.4 animation及MozAnimation都有

ie[11] animation及msAnimation都有

…

真够乱的

这样我们就可以通过这个hash表

{
animation : 'animationend',
WebkitAnimation : 'webkitAnimationEnd',
OAnimation : 'oAnimationEnd', //兼容旧版本opera
msAnimation : 'MSAnimationEnd',
MozAnimation : 'mozAnimationEnd' //兼容旧版本firefox
}

对应取值了,代码如下

var div = document.createElement('div'),
style = div.style,
animationNames = ['animation','WebkitAnimation','OAnimation','msAnimation','MozAnimation'],
/**
* 通过style对象获取正确的 animation 名称
* @return { String || Boolean }  animation 名称
*/
animationName = (function(){
var i = 0,
len = animationNames.length,
name,
u;
for ( ; i < len ; i++) {
name = animationNames[i];
if ( style[name] !== u ) return name;
}
return false;
})(),
//真实的animationend
aniEndName = {
animation : 'animationend',
WebkitAnimation : 'webkitAnimationEnd',
OAnimation : 'oAnimationEnd',
msAnimation : 'MSAnimationEnd',
MozAnimation : 'mozAnimationEnd'
}[ animationName ];
console.log(animationName)
div = style = animationNames = animationName = null;
aniEndName && window.addEventListener(aniEndName, function(e) {
console.log(e.target);
})

另外，可以通过此方法检测 transform 样式名称

var div = document.createElement('div'),
style = div.style,
transforms = [ 'transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform' ],
tfName = (function(){
var i = 0,
len = transforms.length,
name,
u;
for ( ; i < len; i++ ) {
name = transforms[i];
if ( style[ name ] !== u ) return name;
}
return false;
})();
transforms = style = div = null;

总结

1.没涉及到css的使用 in 运算符，检测对象中是否存在事件；

2.涉及到css的可以通过元素的style属性匹配出事件。

96c8