事件绑定(终极版)

内容提纲：

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 }