js 添加事件 attachEvent 和 addEventListener 的用法

標籤：ret   注意   asc   val   mit   change   類型   cal   window   

 

一般我們在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

可惜這個微軟的私人方法,Firefox和其他瀏覽器都不支援,幸運的是他們都支援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.0return 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) {//為每一個事件處理函數指派一個唯一的IDif (!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);});}};}})();

js 添加事件 attachEvent 和 addEventListener 的用法