HTML DOM 元素 addEventListener()
示例
為 <button> 元素新增點選事件
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
自己動手試一試 »
更簡潔的程式碼
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
自己動手試一試 »
更多示例見下文。
描述
addEventListener() 方法將事件處理程式附加到元素上。
元素方法
文件方法
教程
語法
element.addEventListener(event, function, useCapture)
引數
| 引數 | 描述 |
| 事件 | 必需。 事件的名稱。 不要使用“on”字首。 使用“click”而不是“onclick”。 DOM 事件的完整列表. |
| function | 必需。 事件發生時要執行的函式。 |
| useCapture | 可選（預設值 = false）。false - 處理程式在冒泡階段執行。true - 處理程式在捕獲階段執行。 |
返回值
| 無 |
更多示例
您可以向同一個元素新增許多事件
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
自己動手試一試 »
您可以向同一個元素新增不同的事件
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
自己動手試一試 »
更改 <button> 元素的背景顏色
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
自己動手試一試 »
冒泡和捕獲的區別
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
自己動手試一試 »
刪除事件處理程式
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
自己動手試一試 »
瀏覽器支援
element.addEventListener() 是 DOM Level 2 (2001) 的一個特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
