细说浏览器特性检测(2)-通用事件检测

事件检测，即检测某一事件在不同的浏览器中是否存在（可用），这在编写Javascript的过程中也非常重要，如mouseenter/mouseleave事件虽然实用，但并不是所有浏览器都提供了标准的支持，因此需要自己手动模拟，即：

function addEvent(element, name, handler) { if (name == 'mouseenter' && !hasEvent(name, element)) { //通过其他手段模拟mouseenter事件 } //正常的事件注册 };

本文就重点讲述以上代码中hasEvent的具体实现。

基本方案

关于事件的最基本检测方式，则需要从事件的注册方法开始说。

事件通常有3种注册方式，其中之一就是内联式，即在HTML中通过属性的方式声明事件，比如：

<button onclick="alert('CLICKED!');">CLICK ME</button>

以上代码创建了一个button标签，并注册了click事件。

另一个方案是通过直接给onclick赋值来注册事件：

document.getElementById('myButton').onclick = function() { alert('CLICKED!'); };

从上面两种注册事件的方式可以发现，其实onclick是button标签的一种属性（attribute），通过对其赋值可以完成事件的注册。

因此，最基本的事件检测方案，就是通过检查on[事件名]属性是否存在于DOM元素之中，因此有最简单的一个版本：

function hasEvent(name, element) { name = name.indexOf('on') ? 'on' + name : name; element = element || document.createElement('div'); var supported = name in element; };

需要注意的是，事件是对on[事件名]的形式作为元素的属性而存在的，因此从通用性上考虑，在必要的时候对事件名补上'on'即可。另外由于是一个通用的判断事件是否可用的函数，当没有给定具体的元素时，可以使用最广泛应用的div元素作为替代。

部分标签特有事件

有些事件是一些元素特有的，通常包括以下几个：

考虑到这些事件的存在，使用div元素有时会得到错误的结果，因此在创建一个通用的替代用元素时，可以使用一个字典来维护需要创建的元素标签名：

var hasEvent = (function() { var tags = { onsubmit: 'form', onreset: 'form', onselect: 'input', onchange: 'input', onerror: 'img', onload: 'img', onabort: 'img' }; return function(name, element) { name = name.indexOf('on') ? 'on' + name : name; element = element || document.createElement(tags[name] || 'div'); supported = name in element; } })();

使用闭包将tags作为静态的字典使用，可以在一定程度上减少对象生成的开销。

DOM污染

DOM元素之所以会有类似onclick的属性，是因为在DOM元素对象的__proto__中有这个属性，由于Javascript弱类型机制，外部代码可以通过对__proto__添加属性而影响hasEvent函数的结果，如以下代码在Firefox和Chrome中就会产生错误的结果：