HTML DOM Document addEventListener()
示例
向文件新增點選事件
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
自己動手試一試 »
更簡單的語法
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
自己動手試一試 »
更多示例見下文。
描述
addEventListener()
方法將一個事件處理程式附加到文件。
元素方法
文件方法
教程
語法
document.addEventListener(事件, 函式, 捕獲)
引數
引數 | 描述 |
事件 | 必需。 事件名稱。 不要使用“on”字首。 使用“click”而不是“onclick”。 所有 HTML DOM 事件都列在 HTML DOM 事件物件參考. |
function | 必需。 事件發生時要執行的函式。 當事件發生時,一個事件物件作為第一個引數傳遞給函式。事件物件的型別取決於指定的事件。例如,“click”事件屬於 MouseEvent 物件。 |
捕獲 | 可選(預設值 = false)。true - 處理程式在捕獲階段執行。false - 處理程式在冒泡階段執行。 |
返回值
無 |
更多示例
您可以向文件新增許多事件監聽器
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
自己動手試一試 »
您可以新增不同型別的事件
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
自己動手試一試 »
傳遞引數時,使用“匿名函式”呼叫帶引數的函式
document.addEventListener("click", function() {
myFunction(p1, p2);
});
自己動手試一試 »
更改文件的背景顏色
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
自己動手試一試 »
使用 removeEventListener() 方法
// 新增事件監聽器
document.addEventListener("mousemove", myFunction);
// 移除事件監聽器
document.removeEventListener("mousemove", myFunction);
自己動手試一試 »
瀏覽器支援
document.addEventListener
是 DOM Level 2 (2001) 的一個特性。
所有瀏覽器都完全支援。
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |