HTML DOM Document addEventListener() 方法

定義和用法

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

實例

例子 1

向文檔添加 click 事件：

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

親自試一試

更簡單的語法：

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

親自試一試

例子 2

您可以向文檔添加多個事件偵聽器：

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

親自試一試

例子 3

您可以添加不同類型的事件：

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

親自試一試

例子 4

傳遞參數時，使用“匿名函數”調用帶參數的函數：

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

親自試一試

例子 5

更改文檔的背景顏色：

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

親自試一試

例子 6

使用 removeEventListener() 方法：

// 添加事件監聽器
document.addEventListener("mousemove", myFunction);
// 移除事件監聽器
document.removeEventListener("mousemove", myFunction);

親自試一試

語法

document.addEventListener(type, function, capture)

參數

參數 描述
type

必需。事件名稱。

請勿使用 "on" 前綴。

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

所有 HTML DOM 事件都列在：

HTML DOM Event 對象參考手冊
function

必需。事件發生時運行的函數。

當事件發生時，將事件對象作為第一個參數傳遞給函數。

事件對象的類型取決于指定的事件。例如，"click" 事件屬于 MouseEvent 對象。
capture

可選（默認 = false）。

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

返回值

無。

技術細節

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

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

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

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

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

瀏覽器支持

document.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 事件列表