JavaScript中addEventListener的使用詳解

addEventListener 用於註冊事件處理程序，IE 中為 attachEvent，我們為什麼講 addEventListener 而不講 attachEvent 呢？一來 attachEvent 比較簡單，二來 addEventListener 是 DOM 中的標準內容。今天就來跟大家介紹下JavaScript中addEventListener的使用詳解！

(要注意的是p必須放到js前面才行) 

在一般情況下，如果給一個dom物件綁定同一個事件，只有最後一個會生效，例如：

 程式碼如下:

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;

那麼將只有method3生效。
如果是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

如果是ie系列，用attachEvent可以讓多個事件依序都實現，例如：

程式碼如下:

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的使用方式

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 同時支援移除指定的事件, 用途是移除設定的事件, 格式分別如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的演化:

新的DOM2 用法可以addEventListener()这个函数来观察到:

代码如下:

addEventListener(event,function,capture/bubble);

参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:

代码如下:

window.attachEvent(”submit”,myFunction());

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.
如何判断是否支持哪种监听呢？如：

代码如下:

if (typeof window.addEventListener != “undefined”) { 
window.addEventListener(”load”,rollover,false); 
} else { 
window.attachEvent(”onload”,rollover) 
}

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

总结：

本文通过实例详细介绍了关于JavaScript中addEventListener的使用，相信小伙伴对此也是能够有一定的了解，希望对你的工作有所帮助！

相关推荐：

javascript DOM对象学习之事件流addEventListener()使用教程

关于addEventListener问题

详解addEventListener的三个参数之useCapture

以上是JavaScript中addEventListener的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！