JavaScript 跨浏览器添加移除事件

那么我们希望解决非IE 浏览器事件绑定哪些问题呢？
1.支持同一元素的同一事件句柄可以绑定多个监听函数；
2.如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册都被忽略；
3.函数体内的this 指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）；
4.监听函数的执行顺序应当是按照绑定的顺序执行；
5.在函数体内不用使用event = event || window.event; 来标准化Event 对象；

方法一

//跨浏览器添加事件
function addEvent(obj,type,fn){
    if(typeof addEventListener != 'undefined'){
        obj.addEventListener(type,fn,false);    
    }else{
        obj.attachEvent('on'+type,fn);          
    }
}

//跨浏览器移除事件
function removeEvent(obj,type,fn){
    if(typeof removeEventListener != 'undefined'){
        obj.removeEventListener(type,fn);
    }else{
        obj.detachEvent('on'+type,fn);
    }
}

这种方法可以使得同一元素的同一事件句柄绑定多个监听函数、在函数体内也不必标准化Event(事件)对象。

但是该方法的仍有不足，比如在IE浏览器下，事件处理函数体内this默认指向Window、IE浏览器下，执行顺序是倒序、IE浏览器下多次注册同一函数不能被忽略。

方法二

为了解决this问题，可以使用call来冒充对象。

obj.attachEvent('on' + type, function () {
    fn.call(obj);
});

addEvent(oButton, 'click', function () {
    alert(this.value);
});

但是使用call传递this，带来另外的问题：无法标准化Event、无法移除事件。

解决标准化Event方法：

obj.attachEvent('on' + type, function () {
    fn.call(obj, window.event);
});

那么最终有几个问题无法解决：1.无法删除事件；2.无法顺序执行；3.IE 的现代事件绑定存在内存泄漏问题。

方法三

//跨浏览器添加事件绑定
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] = [];
    //存储第一个事件处理函数
    if (obj['on' + type]) {
     obj.events[type][0] = fn;
    }
    //执行事件处理
    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 = 1;

//事件处理函数调用
addEvent.exec = function (event) {
 var e = event || addEvent.fixEvent(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 = 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];
      }
    }
  }
}

该方法解决了IE浏览器下无法删除事件和执行顺序的问题。