js 添加事件 attachEvent 和 addEventListener 的用法

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

obj.onclick=method

這種綁定事件的方式，兼容主流瀏覽器,但如果一個元素上添加多次同一事件呢?

obj.onclick=method1;
obj.onclick=method2;
obj.onclick=method3;

如果這樣寫,那么只有最后綁定的事件,這里是method3會被執行,這個時候我們就不能用onclick這樣的寫法了,主角改登場了,在IE中我們可以使用attachEvent方法

//object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件類型,注意的是需要加on,比如onclick,onsubmit,onchange,執行順序是

method3->method2->method1

可惜這個微軟的私人方法,火狐和其他瀏覽器都不支持,幸運的是他們都支持W3C標准的addEventListener方法

//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false);

執行順序為method1->method2->method3

做前端開發工程師,最悲劇的某過於瀏覽器兼容問題了,上面有兩種添加事件的方法,為了同一添加事件的方法,我們不得不再重新寫一個通用的添加事件函數,幸虧再有前人幫我們做了這件事

function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture);//DOM2.0 return true; } else if (elm.attachEvent) { var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+ return r; } else { elm['on' + evType] = fn;//DOM 0 } }

下面是Dean Edwards 的版本

function addEvent(element, type, handler) { //為每一個事件處理函數分派一個唯一的ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; //為元素的事件類型創建一個哈希表 if (!element.events) element.events = {}; //為每一個"元素/事件"對創建一個事件處理程序的哈希表 var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; //存儲存在的事件處理函數(如果有) if (element["on" + type]) { handlers[0] = element["on" + type]; } } //將事件處理函數存入哈希表 handlers[handler.$$guid] = handler; //指派一個全局的事件處理函數來做所有的工作 element["on" + type] = handleEvent; }; //用來創建唯一的ID的計數器 addEvent.guid = 1; function removeEvent(element, type, handler) { //從哈希表中刪除事件處理函數 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }; function handleEvent(event) { var returnValue = true; //抓獲事件對象(IE使用全局事件對象) event = event || fixEvent(window.event); //取得事件處理函數的哈希表的引用 var handlers = this.events[event.type]; //執行每一個處理函數 for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; //為IE的事件對象添加一些“缺失的”函數 function fixEvent(event) { //添加標准的W3C方法 event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; }; fixEvent.preventDefault = function() { this.returnValue = false; }; fixEvent.stopPropagation = function() { this.cancelBubble = true; };

功能非常強悍，解決IE的this指向問題，event總是作為第一個參數傳入，跨瀏覽器就更不在話下。

最后貢獻一個HTML5工作組的版本：

var addEvent=(function(){ if(document.addEventListener){ return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el[i],type,fn); } }else{ el.addEventListener(type,fn,false); } }; }else{ return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el[i],type,fn); } }else{ el.attachEvent(‘on‘+type,function(){ return fn.call(el,window.event); }); } }; } })();

可能細心的讀者發現了IE的attachEvent和W3C標准的addEventListener綁定多個事件的執行順序是不一樣的

文章轉自：http://www.popo4j.com/article/js-add-event-attachEvent-and-addEventListener.html