一个跨浏览器事件检查的反思

一般的事件检查代码如下：

   function addHandler(target, eventType, handler) {
            if (target.addEventListener) {
                target.addEventListener(eventType, handler, false);
            }
            else {
                target.attachEvent("on" + eventType, handler);
            }
        }
        function removeHandler(target, eventType, handler) {
            if (target.removeEventListener) {
                target.removeEventListener(eventType, handler, false);
            }
            else {
                target.detachEvent("on" + eventType, handler);
            }
        }

乍一看，这些函数为实现他们的目的已经足够优化。影藏的性能问题在于每次函数调用时都执行重复工作。每次都进行同样的检查，看看某种方法是否存在。如果addHandler

以上连就调用addEventListener那么每个后续调用都要出现这句代码。

解决方案一：延迟加载：

 function addHandler(target, eventType, handler) {
            if (target.addEventListener) {
                addHandler = function (target, eventType, handler) {
                    target.addEventListener(eventType, handler, false);
                };
            }
            else {
                addHandler = function (target, eventType, handler) {
                    target.attachEvent("on" + eventType, handler);
                };
            }
            addHandler(target, eventType, handler);
        }
        function removeHandler(target, eventType, handler) {
            if (target.removeEventListener) {
                removeHandler = function (target, eventType, handler) {
                    target.removeEventListener(eventType, handler, false);
                };
            }
            else {
                removeHandler = function (target, eventType, handler) {
                    target.detachEvent("on" + eventType, handler);
                };
            }
            removeHandler(target, eventType, handler);
        }

这两个方法第一次被调用时，检查一次并决定适用那种方法附加或分离句柄。然后，原始函数就被包含适当操作的新函数覆盖了。最后调用新函数并将原始参数传给他。

调用一个延迟加载函数总是在第一次使用较长时间，因为它必须运行监测然后调用另一个函数已完成任务。但是，后续调用同一函数将快很多，因为不再执行检查逻辑了。

延迟加载适用于函数不会在页面上立即被用到的场合。

解决方案二：预加载

  var addHandler = document.body.addEventListener ?
           function (target, eventType, handler) {
               target.addEventListener(eventType, handler, false);
           } :
          function (target, eventType, handler) {
              target.attachEvent("on" + eventType, handler);
          };
        var removeHandler = document.body.removeEventListener ?
          function (target, eventType, handler) {
              target.removeEventListener(eventType, handler, false);
          } :
        function (target, eventType, handler) {
            target.detachEvent("on" + eventType, handler);
        };

它在脚本加载前进行检查，而不等待函数调用。这样做检查仍然只是一次，但此过程中来的更早。预加载适用于一个函数马上就会用到，而且在整个页面生命周期中经常使用的场合

在这里强调一下2级事件虽然支持事件捕获和事件冒泡，但是addEventListener、removeEventListener中第三个参数为false表示支持事件冒泡，为true表示支持事件捕获。

同时这里也把Dean Edwards写的addEvent库的代码给出来一共大家参考

  function addEvent(element, type, handler) {
           if (!handler.$$guid) {
           //为每个事件处理函数赋予一个独立的ID
               handler.$$guid = addEvent.guid++;
           }
           if (!element.events) {
           //为元素建立一个事件类型散列表
               element.events = {};
           }
           //为每个元素、事件建立一个事件处理函数散列表
           var handlers = element.events[type];
           if (!handlers) {
               handlers = element.events[type] = {};
               if (element["on" + type]) {
                   handlers[0] = element["on" + type];
               }
           }
           handlers[handler.$$guid] = handler;
           element["on" + type] = handleEvent;
       }
       //创建独立ID的计数器
       addEvent.guid = 1;
       function removeEvent(element, type, handler) {
           if (element.events && element.events[type]) {
               delete element.events[type][handler.$$guid];
           }
       }
       function handleEvent(event) {
           var returnValue = true;
           event = event || fixEvent(window.event);//获取事件对象
           var handlers = this.events[event.type];//获取书剑处理函数散列表引用
           for (var i in handlers) {
               this.$$handleEvent = handlers[i];
               if (this.$$handleEvent(event) === false) {
                   returnValue = false;
               }
           }
           return returnValue;
       };
       function fixEvent(event) {
           event.preventDefault = fixEvent.preventDefault;
           event.stopPropagation = fixEvent.stopPropagation;
           return event;
       };
       fixEvent.preventDefault = function () {
           this.returnValue = false;
       };
       fixEvent.stopPropagation = function () {
           this.cancelBubble = true;
       }

       /*调用示例
       addEvent(document.getElementsByTagName("div")[0], "click", function () {
           alert("ok");
           removeEvent(this, "click", arguments.callee);
       });
       */