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浏览器下无法删除事件和执行顺序的问题。