Javascript的addEventListener()及attachEvent()區別分析_javascript技巧

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
實例：(要注意的是div必須放到js前面才行)
代碼如下:





點擊

alt=”Blog”>

上述的 typeof window.addEventListener != “undefined” 程序代碼可以判斷使用者的瀏覽器是否支持AddEventListener這個事件模型, 如果不支持就使用attachEvent.

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

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

數據參考: Chapter 14 - Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com