事件绑定(终极版)

内容提纲：

1.问题所在

2.设置代码

发文不易，转载注明出处！

 

1.问题所在

现代绑定中W3C使用的是：addEventListener和removeEventListener。IE使用的是attachEvent和detachEvent。咱们知道IE的这两个问题多多，而且伴随内存泄漏。因此，解决这些问题很是有必要。

那么咱们但愿解决非IE浏览器事件绑定哪些问题呢？

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

2.若是在同一元素的同一事件句柄上屡次注册同一函数，那么第一次注册后的全部注册都被忽略；

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

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

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

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

 

2.设置代码

 1 //跨浏览器添加事件绑定
 2 
 3 function addEvent(obj, type, fn) {  4 
 5        if (typeof obj.addEventListener != 'undefined') {  6 
 7               obj.addEventListener(type, fn, false);  8 
 9        } else {  10 
 11               //建立事件类型的散列表(哈希表)
 12 
 13               if (!obj.events) obj.events = {};  14 
 15               //建立存放事件处理函数的数组
 16 
 17               if (!obj.events[type]) {  18 
 19                      obj.events[type] = []; 28 
 29                      //执行事件处理
 30 
 31                      obj['on' + type] = addEvent.exec;  32 
 33               } else {  34 
 35                      //同一个注册函数取消计数
 36 
 37                      if (addEvent.array(fn,obj.events[type])) return false;  38 
 39  }  40 
 41               //经过计数器存储
 42 
 43               obj.events[type][addEvent.ID++] = fn;  44 
 45  }  46 
 47 }  48 
 49  
 50 
 51 addEvent.array = function (fn, es){  52 
 53        for (var i in es) {  54 
 55               if (es[i] == fn) return true;  56 
 57  }  58 
 59        return false;  60 
 61 }  62 
 63  
 64 
 65 //每一个事件处理函数的ID计数器
 66 
 67 addEvent.ID = 0;  68 
 69  
 70 
 71 //事件处理函数调用
 72 
 73 addEvent.exec = function (event) {  74 
 75        var e = event || addEvent.fixEvent(window.event);  76 
 77        var es = this.events[e.type];  78 
 79        for (var i in es) {  80 
 81               es[i].call(this, e);  82 
 83  }  84 
 85 };  86 
 87  
 88 
 89 //获取IE的event，兼容W3C的调用
 90 
 91 addEvent.fixEvent = function (event) {  92 　　//为event添加preventDefault方法
 93        event.preventDefault = addEvent.fixEvent.preventDefault;
 95        event.stopPropagation = addEvent.fixEvent.stopPropagation;  96 
 97        return event;  98 
 99 }; 100 
101  
102 
103 //兼容IE和W3C阻止默认行为
104 
105 addEvent.fixEvent.preventDefault = function () { 106 
107        this.returnValue = false; 108 
109 }; 110 
111  
112 
113 //兼容IE和W3C取消冒泡
114 
115 addEvent.fixEvent.stopPropagation = function () { 116 
117        this.cancelBubble = true; 118 
119 }; 120 
121  
122 
123 //跨浏览器删除事件
124 
125 function removeEvent(obj, type, fn) { 126 
127        if (typeof obj.removeEventListener != 'undefined') { 128 
129               obj.removeEventListener(type, fn, false); 130 
131        } else { 132 
133               var es = obj.events[type]; 134 
135               for (var i in es) { 136 
137                      if (es[i] == fn) { 138 
139                             delete obj.events[type][i]; 140 
141  } 142 
143  } 144 
145  } 146 
147 }