Javascript 的addEventListener()及attachEvent()區別分析

標籤：apt   介面   als   講解   bind   doc   ext   事件處理   windows   

Mozilla中： 

addEventListener的使用方式： 

target.addEventListener(type, listener, useCapture); 

target： 文檔節點、document、window 或 XMLHttpRequest。 
type： 字串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：實現了 EventListener 介面或者是 JavaScript 中的函數。 
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 

IE中： 

target.attachEvent(type, listener); 
target： 文檔節點、document、window 或 XMLHttpRequest。 
type： 字串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。 
listener ：實現了 EventListener 介面或者是 JavaScript 中的函數。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 

W3C 及 IE 同時支援移除指定的事件, 用途是移除設定的事件, 格式分別如下: 

W3C格式: 

removeEventListener(event,function,capture/bubble); 

Windows IE的格式如下: 

detachEvent(event,function); 


target.addEventListener(type, listener, useCapture); 
target 文檔節點、document、window 或 XMLHttpRequest。 
type 字串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener 實現了 EventListener 介面或者是 JavaScript 中的函數。 
useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，一般用 false 
事件觸發時，會將一個 Event 對象傳遞給事件處理常式，比如： 
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 
適應的瀏覽器版本不同，同時在使用的過程中要注意 
attachEvent方法 按鈕onclick IE中使用 
addEventListener方法 按鈕click fox中使用 
兩者使用的原理：可對執行的優先順序不一樣，下面執行個體講解如下： 
attachEvent方法，為某一事件附加其它的處理事件。（不支援Mozilla系列） 
addEventListener方法 用於 Mozilla系列 
舉例: document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;如果這樣寫,那麼將會只有medhot3被執行 
寫成這樣： 
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3);執行順序為method3->method2->method1 
如果是Mozilla系列，並不支援該方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false);執行順序為method1->method2->method3 

<script type="text/javascript">    //簡單的封裝綁定 相容IE    function bindEvent(obj,events,fn){        if(obj.addEventListener){            obj.addEventListener(events,fn,false);        }else{            obj.attachEvent(‘on‘+events,fn);        }    }    //demo    bindEvent(document,‘click‘,function(){        alert("");    });</script>

 

Javascript 的addEventListener()及attachEvent()區別分析