事件绑定(终极版)

1.问题所在

现代绑定中W3C使用的是：addEventListener和removeEventListener。IE使用的是attachEvent和detachEvent。我们知道IE的这两个问题多多，并且伴随内存泄漏。所以，解决这些问题非常有必要。

那么我们希望解决非IE浏览器事件绑定哪些问题呢？

1.支持同一元素的同一事件句柄可以绑定多个监听函数；

2.如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册都被忽略；

3.函数体内的this指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）；

4.监听函数的执行顺序应当是按照绑定的顺序执行；

5.在函数体内不用使用 event = event || window.event; 来标准化Event对象；

我们尝试着通过使用传统事件绑定对IE进行封装。

 

2.设置代码

 //跨浏览器添加事件绑定
 
 function addEvent(obj, type, fn) {
        if (typeof obj.addEventListener != 'undefined') {
               obj.addEventListener(type, fn, false);
        } else {
               //创建事件类型的散列表(哈希表)
               if (!obj.events) obj.events = {};
               //创建存放事件处理函数的数组
               if (!obj.events[type]) {
                      obj.events[type] = []; 28 
                      //执行事件处理
                      obj['on' + type] = addEvent.exec;
               } else {
                      //同一个注册函数取消计数
                      if (addEvent.array(fn,obj.events[type])) return false;  
               }
               //通过计数器存储
               obj.events[type][addEvent.ID++] = fn;
        }
 }
 
 addEvent.array = function (fn, es){
       for (var i in es) {
            if (es[i] == fn) return true;
       }
       return false;
}
 //每个事件处理函数的ID计数器
 
addEvent.ID = 0;
 
//事件处理函数调用

addEvent.exec = function (event) {
       var e = event || addEvent.fixEvent(window.event);
       var es = this.events[e.type];
       for (var i in es) {
             es[i].call(this, e);
       }
};

//获取IE的event，兼容W3C的调用

addEvent.fixEvent = function (event) {
　　//为event添加preventDefault方法
       event.preventDefault = addEvent.fixEvent.preventDefault;
       event.stopPropagation = addEvent.fixEvent.stopPropagation;
       return event;
};
//兼容IE和W3C阻止默认行为

addEvent.fixEvent.preventDefault = function () {
     this.returnValue = false;
};

//兼容IE和W3C取消冒泡
addEvent.fixEvent.stopPropagation = function () {
    this.cancelBubble = true;
};
//跨浏览器删除事件
function removeEvent(obj, type, fn) {
     if (typeof obj.removeEventListener != 'undefined') {
             obj.removeEventListener(type, fn, false);
　　　} else {
            var es = obj.events[type];
            for (var i in es) {
                 if (es[i] == fn) {
                          delete obj.events[type][i];
                   }
             }
      }
 }