JavaScript HTML DOM EventListener
addEventListener() 方法
示例
新增一個事件監聽器，當用戶點選按鈕時觸發
document.getElementById("myBtn").addEventListener("click", displayDate);
自己動手試一試 »
addEventListener() 方法將事件處理器附加到指定的元素。
addEventListener() 方法將事件處理器附加到元素，而不會覆蓋現有的事件處理器。
您可以為同一個元素新增多個事件處理器。
您可以為同一個元素新增多個相同型別的事件處理器，例如兩個“click”事件。
您不僅可以將事件監聽器新增到 HTML 元素，還可以新增到任何 DOM 物件。例如 window 物件。
addEventListener() 方法可以更輕鬆地控制事件如何響應冒泡。
使用 addEventListener() 方法時，JavaScript 與 HTML 標記分離，提高了可讀性，並允許您在不控制 HTML 標記的情況下新增事件監聽器。
您可以使用 removeEventListener() 方法輕鬆刪除事件監聽器。
語法
element.addEventListener(event, function, useCapture);
第一個引數是事件的型別（例如“click”或“mousedown”或其他 HTML DOM 事件）。
第二個引數是事件發生時要呼叫的函式。
第三個引數是一個布林值，指定是使用事件冒泡還是事件捕獲。此引數是可選的。
請注意，事件前面不要加“on”字首；請使用“click”而不是“onclick”。
為元素新增事件處理器
示例
當用戶點選元素時，彈出“Hello World!”
element.addEventListener("click", function(){ alert("Hello World!"); });
自己動手試一試 »
您也可以引用外部的“命名”函式
示例
當用戶點選元素時，彈出“Hello World!”
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
自己動手試一試 »
為同一元素新增多個事件處理器
addEventListener() 方法允許您為同一個元素新增多個事件，而不會覆蓋現有事件。
示例
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
自己動手試一試 »
您可以為同一個元素新增不同型別的事件
示例
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
自己動手試一試 »
為 window 物件新增事件處理器
addEventListener() 方法允許您在任何 HTML DOM 物件上新增事件監聽器，例如 HTML 元素、HTML 文件、window 物件，或支援事件的其他物件，例如 xmlHttpRequest 物件。
示例
新增一個事件監聽器，當用戶調整視窗大小時觸發
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
自己動手試一試 »
傳遞引數
傳遞引數值時，請使用一個“匿名函式”，該函式帶有引數呼叫指定的函式。
事件冒泡還是事件捕獲？
HTML DOM 中有兩種事件傳播方式：冒泡和捕獲。
事件傳播定義了當事件發生時元素的順序。如果您有一個包含在 <div> 元素中的 <p> 元素，並且使用者點選了 <p> 元素，應該先處理哪個元素的“click”事件？
在冒泡中，最內部元素的事件先處理，然後是外部元素：先處理 <p> 元素的 click 事件，然後處理 <div> 元素的 click 事件。
在捕獲中，最外部元素的事件先處理，然後是內部元素：先處理 <div> 元素的 click 事件，然後處理 <p> 元素的 click 事件。
使用 addEventListener() 方法，您可以透過“useCapture”引數指定傳播型別。
addEventListener(event, function, useCapture);
預設值為 false，表示使用冒泡傳播。當設定為 true 時，事件使用捕獲傳播。
示例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
自己動手試一試 »
removeEventListener() 方法
removeEventListener() 方法移除已使用 addEventListener() 方法附加的事件處理器。
HTML DOM 事件物件參考
有關所有 HTML DOM 事件的列表，請參閱我們的完整 HTML DOM 事件物件參考。
