检测浏览器对事件的支持程度

自从jQuery搞出特性侦探这东东，西方从来没有如此狂热研究浏览器。在以前javascript与DOM遍地是bug，美工主宰前端的年代，人们只有两种极端方式，用户禁止脚本运行，浏览器商狂升级（IE6之前也很积极的）。这年头，也就Base2与Prototype2做得最好，当然dojo与YUI也不错。不过最近五年，Opera与Safari都建立了对DOM完整的支持后，世界分两半，一半是IE统治的混乱世界，它是拥有如此丰富的私有特征，CSS表达式，HTC，CSS滤镜，VML，userData，XML数据岛，最早的AJAX支持，以及DHTML最好的支持API(innerHTML，innerText，outerHTML，outerText，insertAdjactentXXX，offsetXXX，clientXXX，scrollXXX，Range，designMode，sertRow和insertCell等动态操作表格API……)，难怪IE会赢的！不过IE也埋下了许多地雷，加之IE不会其他游览器升级那么快，许多Bug都要我们亲手修正。这么多浏览器，这么多版本，特性侦探是很有必要。现在我们看到那一套关于事件的API，基本上是微软从桌面搬过来，后来W3C又加一大堆与DOM开头的事件，不过除了DOMMouseScroll基本没什么人用。N多事件，与逐个嗅探浏览器那样成了个头痛的问题。

John Resig说过类库就是用来屏蔽浏览器的差异的。在国外这篇文章中，就有对事件支持的详尽分析（注，那个博客是John Resig经常去的，你可以把它当成的jQuery核心小组的酒吧，他们与其他高手经常在那里讨论浏览器的天方夜谭，研究javascript的炼金术）。在事件系统中，很明显的几个，IE支持mouseenter与mouseleave，Opera支持右键菜单但不允许你用contextmenu类似的API操作它，还有onbeforepaste, onbeforecut这些与input元素相关的事件，IE与WebKit支持，但FF不支持……非常混乱。一般我们可以用for...in循环把它遍历一下，或者像以下简单地检测：

'onclick' in document.documentElement; // true
'onclick2' in document.documentElement; // false

很不幸，这不准确，因为我们可以添加一些同名的自定义属性。有人说，赶在用户添加之前检测它们，但也行不通，因此有些事件是只有特定元素才有的。

'onreset' in document.documentElement; // false
'onreset' in document.createElement('input'); // true

在标准浏览器我们可以用setAttrubute为元素赋以已知事件名一个值，这个值会自动包装成一个函数，如果非事件名，则不会改变其类型。那么我检测它是否为函数就是！

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

同样很不幸，基于众所周知的原因，IE的setAttribute与W3C是有很大的差别，IE会原样输出，加之，IE不存在所谓的泛化函数（原生对象的方法），它的API没有name,call,apply与toString，因此也无法判定它们是否为函数。综合以上两种方式，看看外国人搞出什么怪物来……

var isEventSupported = (function(){//使用模块模式
 
        var TAGNAMES = {//特定元素上的特定事件
          'select':'input','change':'input',
          'submit':'form','reset':'form',
          'error':'img','load':'img','abort':'img'
        }
 
        function isEventSupported(eventName, element) {
 
          element = element || document.createElement(TAGNAMES[eventName] || 'div');
          eventName = 'on' + eventName;
 
          // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
          var isSupported = (eventName in element);//DOM0
 
          if (!isSupported) {
            // if it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
            if (!element.setAttribute) {
              element = document.createElement('div');
            }
            if (element.setAttribute && element.removeAttribute) {
              element.setAttribute(eventName, '');
              isSupported = typeof element[eventName] == 'function';
 
              // if property was created, "remove it" (by setting value to `undefined`)
              if (typeof element[eventName] != 'undefined') {
                element[eventName] = void 0;
              }
              element.removeAttribute(eventName);
            }
          }
 
          element = null;
          return isSupported;
        }
        return isEventSupported;
      })();

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head id="head">
    <meta charset="utf-8"/>
    <title>司徒正美 </title>

var TAGNAMES = {//特定元素上的特定事件
            'select':'input','change':'input',
            'submit':'form','reset':'form',
            'error':'img','load':'img','abort':'img'
          }

function isEventSupported(eventName, element) {

element = element || document.createElement(TAGNAMES[eventName] || 'div');
            eventName = 'on' + eventName;

// When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
            var isSupported = (eventName in element);//DOM0

if (!isSupported) {
              // if it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
              if (!element.setAttribute) {
                element = document.createElement('div');
              }
              if (element.setAttribute && element.removeAttribute) {
                element.setAttribute(eventName, '');
                isSupported = typeof element[eventName] == 'function';

// if property was created, "remove it" (by setting value to `undefined`)
                if (typeof element[eventName] != 'undefined') {
                  element[eventName] = void 0;
                }
                element.removeAttribute(eventName);
              }
            }

element = null;
            return isSupported;
          }
          return isEventSupported;
        })();
        function w(name, element) {
          document.write(name + ': ' + (
          isEventSupported(name, element)
            ? '<span style="background-color:green;color:white;">true</span>'
          : '<span style="background-color:red;color:white;">false</span>'
        ) + '<br>');
        }

document.write('<pre>' + isEventSupported + '</pre><br><br>');

document.write('<h2>Mouse events:</h2>');

w('click');
        w('dblclick');
        w('mousedown');
        w('mouseup');
        w('mouseover');
        w('mousemove');
        w('mouseout');

document.write('<h2>Key events:</h2>');

w('keypress');
        w('keydown');
        w('keyup');

document.write('<h2>HTML events</h2>');

w('load');
        w('unload', window);
        w('abort');
        w('error');

document.write('<h2>View events</h2>');

w('resize', window);
        w('scroll');

document.write('<h2>Form events:</h2>');

w('submit');
        w('reset');

document.write('<h2>Form controls\' events:</h2>');

w('select');
        w('change');

document.write('<h2>Activation events:</h2>');

w('focus');
        w('blur');

document.write('<h2>MSHTML DOM events:</h2>');

w('cut');
        w('copy');
        w('paste');
        w('beforecut');
        w('beforecopy');
        w('beforepaste');
        w('afterupdate');
        w('beforeupdate');
        w('cellchange');
        w('dataavailable');
        w('datasetchanged');
        w('datasetcomplete');
        w('errorupdate');
        w('rowenter');
        w('rowexit');
        w('rowsdelete');
        w('drag');
        w('dragstart');
        w('dragenter');
        w('dragover');
        w('dragleave');
        w('dragend');
        w('drop');
        w('selectstart');
        w('mouseenter');
        w('mouseleave');
        w('activate');
        w('beforeactivate');
        w('deactivate');
        w('beforedeactivate');
        w('focusin');
        w('focusout');
        w('stop', document);
        w('readystatechange');
        w('beforeprint', document.body);
        w('afterprint', document.body);
        w('beforeunload', window);

document.write('<h2>Unexistent (most likely) events:</h2>');

w('click2');
        w('foobarbaz');

document.write('<h2>Unexistent in Opera <=10a</h2>');

w('contextmenu');

document.write('<h2>iPhone touch/gesture events</h2>');

w('touchstart');
        w('touchend');
        w('touchmove');
        w('touchcancel');

document.write('<br>');

w('gesturestart');
        w('gesturechange');
        w('gestureend');

document.write('<h2>HTML5 events</h2>');

w('hashchange', document.body);
        w('online', document.body);
        w('offline', document.body);
        w('message', window);
        w('undo', document.body);
        w('redo', document.body);
        w('storage', window);
        w('popstate', window);

w('canplay', document.createElement('video'));
        w('seeking', document.createElement('video'));
        w('seekend', document.createElement('video'));

document.write('<h2>Proprietary</h2>');

w('pageshow', window);
        w('pagehide', window);

};

</script>

</head>
  <body>

</body>
</html>

连HTML5与iPhone touch的一些专有事件也能检测到。

在jQuery1.4α2中也支持这种特性侦探了，不过用的是早期版本，不如上面写出来的那个！

//jQuery1.4α2
    var eventSupported = function( eventName ) { 
        var el = document.createElement("div"); 
        eventName = "on" + eventName; 
 
        var isSupported = (eventName in el); 
        if ( !isSupported ) { 
            el.setAttribute(eventName, "return;"); 
            isSupported = typeof el[eventName] === "function"; 
        } 
        el = null; 
 
        return isSupported; 
    };