js添加事件attachEvent和addEventListener的用法

一般我們在JS中添加事件,是這樣子的
view source
 

1 obj.onclick=method
這種綁定事件的方式，相容主流瀏覽器,但如果一個元素上添加多次同一事件呢?
view source
 

1 obj.onclick=method1;
2 obj.onclick=method2;
3 obj.onclick=method3;
如果這樣寫,那麼只有最後綁定的事件,這裡是method3會被執行,這個時候我們就不能用onclick這樣的寫法了,主角改登場了,在IE中我們可以使用attachEvent方法
view source
 

1 //object.attachEvent(event,function);
2 btn1Obj.attachEvent("onclick",method1);
3 btn1Obj.attachEvent("onclick",method2);
4 btn1Obj.attachEvent("onclick",method3);
使用格式是前面是事件類型,注意的是需要加on,比如onclick,onsubmit,onchange,執行順序是
method3->method2->method1
可惜這個微軟的私人方法,Firefox和其他瀏覽器都不支援,幸運的是他們都支援W3C標準的addEventListener方法
view source
 

1 //element.addEventListener(type,listener,useCapture);
2 btn1Obj.addEventListener("click",method1,false);
3 btn1Obj.addEventListener("click",method2,false);
4 btn1Obj.addEventListener("click",method3,false);
執行順序為method1->method2->method3
做前端開發工程師,最悲劇的某過於瀏覽器安全色問題了,上面有兩種添加事件的方法,為了同一添加事件的方法,我們不得不再重新寫一個通用的添加事件函數,幸虧再有前人幫我們做了這件事
view source
 

01 function addEvent(elm, evType, fn, useCapture) {
02 if (elm.addEventListener) {
03 elm.addEventListener(evType, fn, useCapture);//DOM2.0
04 return true;
05 }
06 else if (elm.attachEvent) {
07 var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
08 return r;
09 }
10 else {
11 elm['on' + evType] = fn;//DOM 0
12 }
13 }
下面是Dean Edwards 的版本
view source
 

01 function addEvent(element, type, handler) {
02 //為每一個事件處理函數指派一個唯一的ID
03 if (!handler.$$guid) handler.$$guid = addEvent.guid++;
04 //為元素的事件類型建立一個雜湊表
05 if (!element.events) element.events = {};
06 //為每一個"元素/事件"對建立一個事件處理常式的雜湊表
07 var handlers = element.events[type];
08 if (!handlers) {
09 handlers = element.events[type] = {};
10 //儲存存在的事件處理函數(如果有)
11 if (element["on" + type]) {
12 handlers[0] = element["on" + type];
13 }
14 }
15 //將事件處理函數存入雜湊表
16 handlers[handler.$$guid] = handler;
17 //指派一個全域的事件處理函數來做所有的工作
18 element["on" + type] = handleEvent;
19 };
20 //用來建立唯一的ID的計數器
21 addEvent.guid = 1;
22 function removeEvent(element, type, handler) {
23 //從雜湊表中刪除事件處理函數 www.2cto.com
24 if (element.events && element.events[type]) {
25 delete element.events[type][handler.$$guid];
26 }
27 };
28 function handleEvent(event) {
29 var returnValue = true;
30 //抓獲事件對象(IE使用全域事件對象)
31 event = event || fixEvent(window.event);
32 //取得事件處理函數的雜湊表的引用
33 var handlers = this.events[event.type];
34 //執行每一個處理函數
35 for (var i in handlers) {
36 this.$$handleEvent = handlers[i];
37 if (this.$$handleEvent(event) === false) {
38 returnValue = false;
39 }
40 }
41 return returnValue;
42 };
43 //為IE的事件對象添加一些“缺失的”函數
44 function fixEvent(event) {
45 //添加標準的W3C方法
46 event.preventDefault = fixEvent.preventDefault;
47 event.stopPropagation = fixEvent.stopPropagation;
48 return event;
49 };
50 fixEvent.preventDefault = function() {
51 this.returnValue = false;
52 };
53 fixEvent.stopPropagation = function() {
54 this.cancelBubble = true;
55 };
功能非常強悍，解決IE的this指向問題，event總是作為第一個參數傳入，跨瀏覽器就更不在話下。
最後貢獻一個HTML5工作群組的版本：
view source
 

01 var addEvent=(function(){
02 if(document.addEventListener){
03 return function(el,type,fn){
04 if(el.length){
05 for(var i=0;i<el.length;i++){
06 addEvent(el[i],type,fn);
07 }
08 }else{
09 el.addEventListener(type,fn,false);
10 }
11 };
12 }else{
13 return function(el,type,fn){
14 if(el.length){
15 for(var i=0;i<el.length;i++){
16 addEvent(el[i],type,fn);
17 }
18 }else{
19 el.attachEvent(‘on‘+type,function(){
20 return fn.call(el,window.event);
21 });
22 }
23 };
24 }
25 })();
可能細心的讀者發現了IE的attachEvent和W3C標準的addEventListener綁定多個事件的執行順序是不一樣的

 

摘自 你微笑時好美