addEventListener() 方法

首先需要了解addEventListener()的工作原理是將實現EventListener的函數或對象添加到調用它的EventTarget上的指定事件類型的事件偵聽器列表中。

語法

element.addEventListener(event, function, useCapture)

參數值

參數	描述
event	必須。字符串，指定事件名。 注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。
function	必須。指定要事件觸發時執行的函數。 當事件對象會作為第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(鼠標事件) 對象。
useCapture	可選。布爾值，指定事件是否在捕獲或冒泡階段執行。 可能值: true - 事件句柄在捕獲階段執行 false- false- 默認。事件句柄在冒泡階段執行

 

示例

添加一個簡單的監聽器

下面這個例子用來展示如何使用 addEventListener() 監聽鼠標點擊一個元素。

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

// 改變t2的函數
function modifyText() {  3   var t2 = document.getElementById("t2");  4   if (t2.firstChild.nodeValue == "three") {  5     t2.firstChild.nodeValue = "two";  6   } else {  7     t2.firstChild.nodeValue = "three";  8  }  9 } 10 
// 為table添加事件監聽器
var el = document.getElementById("outside"); 13 el.addEventListener("click", modifyText, false); 14 
// 輸出結果：↓
// one
// two

實例

您可以在同一個元素中添加不同類型的事件。

該實例演示了如何在同一個 <button> 元素中添加多個事件：

<button id="myBtn">點我</button>
<p id="demo"></p>

var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "鼠標經過!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "點擊!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "鼠標離開!<br>" }

 

備注

為什么要使用 addEventListener?

addEventListener() 是 W3C DOM 規范中提供的注冊事件監聽器的方法。它的優點包括：

• 它允許給一個事件注冊多個監聽器。 特別是在使用AJAX庫，JavaScript模塊，或其他需要第三方庫/插件的代碼。
• 它提供了一種更精細的手段控制 listener 的觸發階段。（即可以選擇捕獲或者冒泡）。
• 它對任何 DOM 元素都是有效的，而不僅僅只對 HTML 元素有效。