HTML DOM addEventListener() 方法

定義和用法

addEventListener() 方法將事件處理程序附加到元素。

實例

例子 1

向 <button> 元素添加 click 事件：

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

親自試一試

例子 2

更緊湊的代碼：

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

親自試一試

您可以在頁面下方找到更多實例。

語法

element.addEventListener(type, function, useCapture)

參數

參數 描述
type

必需。事件的名稱。

請不要使用 "on" 前綴。

請使用 "click" 而不是 "onclick"。


DOM 事件的完整列表
function 必需。事件發生時運行的函數。
useCapture

可選（default = false）。

  • false - 處理程序在冒泡階段執行。
  • true - 處理程序在捕獲階段執行。

返回值

無。

技術細節

該方法將把指定的事件監聽器函數添加到當前節點的監聽器集合中，以處理指定類型 type 的事件。如果 useCapture 為 true，則監聽器被注冊為捕捉事件監聽器。如果 useCapture 為 false，它被注冊為普通事件監聽器。

addEventListener() 可能被調用多次，在同一個節點上為同一種類型的事件注冊多個事件句柄。但要注意，DOM 不能確定多個事件句柄被調用的順序。

如果一個事件監聽器函數在同一個節點上用相同的 type 和 useCapture 參數注冊了兩次，那么第二次注冊將被忽略。如果正在處理一個節點上的事件時，在這個節點上注冊了一個新的事件監聽器，則不會為那個事件調用新的事件監聽器。

當用 Node.cloneNode() 方法或 Document.importNode() 方法復制一個 Document 節點時，不會復制為原始節點注冊的事件監聽器。

這個方法也在 Document 和 Window 對象上定義了，而且工作方式類似。

更多實例

例子 3

您可以將許多事件添加到同一元素：

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

親自試一試

例子 4

您可以將不同的事件添加到同一元素：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

親自試一試

例子 5

如需傳遞參數值，請使用“匿名函數”：

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

親自試一試

例子 6

更改 <button> 元素的背景顏色：

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

親自試一試

例子 7

冒泡和捕獲的區別：

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

親自試一試

例子 8

刪除事件處理程序：

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

親自試一試

瀏覽器支持

element.addEventListener() 是 DOM Level 2 (2001) 功能。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相關頁面

元素方法：

addEventListener() 方法

removeEventListener() 方法

文檔方法：

addEventListener() 方法

removeEventListener() 方法

教程：

HTML DOM EventListener

DOM 事件的完整列表