事件检测

给浏览器绑定事件有时候是非常痛苦的事情，不同的浏览器提供不尽相同的功能的同时，也提供了不同的事件。例如，IE 系列的浏览器支持 mouseenter/mouseleave 事件；Opera 不支持 contextmenu 以及 input 相关的 onbeforepaste、onbeforecut 等事件。

浏览器之间不同程度的事件支持情况，会加重编写跨浏览器的开发成本。而在某种“无奈”的情况下（特别针对 IE），我们都会采用浏览器嗅探来决定绑定不同的事件，例如绑定鼠标滚轮事件：

if (Env.ua.ie) {    Event.on(document, 'mousewheel', callback);} else {    Event.on(document, 'DOMMouseScroll', callback);}

或者另外中做法就是干脆绑定两个事件。虽然这也能很正常的工作，但我们都了解，无论是基于浏览器嗅探还是重复绑定无用的事件，这都是不完美的解决方案。

Juriy Zaytsev 的代码给了我们解决这个问题的些启示，他利用 DOM 的特性，来判断针对某元素是否支持具体事件。例如

var el = document.createElement('div');el.setAttribute('onclick', 'return;');typeof el.onclick; // "function"el.setAttribute('onclick2', 'return;');typeof el.onclick2; // "undefined"

那么，根据这一特性，就可以编写出不依赖浏览器嗅探的事件检测脚本，原文的最终例子

var isEventSupported = (function() {    // 根据特有的事件创建对应的 HTML 元素    var TAGNAMES = {        'select':'input','change':'input',        'submit':'form','reset':'form',        'error':'img','load':'img','abort':'img'    }    function isEventSupported(eventName) {        var el = document.createElement(TAGNAMES[eventName] || 'div');        eventName = 'on' + eventName;        // 检测元素是否已经包含了对应的事件        var isSupported = (eventName in el);        // 如果没有对应事件，则尝试增加对应事件，然后判断是否为回调        if (!isSupported) {            el.setAttribute(eventName, 'return;');            isSupported = typeof el[eventName] == 'function';        }        el = null;        return isSupported;    }    return isEventSupported;})();

那么，判断是否为 Opera 浏览器使用

isEventSupported("contextmenu")

就好过

navigator.userAgent.indexOf('Opera') > -1

而且，以后如果 Opera“修复”了该问题，由于 isEventSupported("contextmenu") 返回的是 true，从而也可保证代码健壮的运行。

最后，原文作者写了个简单的测试页面，用于检测具体浏览器的 DOM Level2 的支持情况。