HTML DOM addEventListener() 方法

HTML DOM Element 對象

element.addEventListener()方法將事件處理程序附加到指定的元素。

使用element.removeEventListener()方法刪除與addEventListener()方法一起附加的事件處理程序。

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

語法：

element.addEventListener(event, listener, useCapture)
var x = document.querySelector("button");
x.addEventListener("click", function() {
alert("Hello World!!!");
});
測試看看?/?

瀏覽器兼容性

表中的數(shù)字指定了完全支持addEventListener()方法的第一個瀏覽器版本：

Method
addEventListener()1171.09

參數(shù)值

參數(shù)描述
event（必需）事件可以是任何有效的JavaScript事件。使用事件時不使用“on”前綴，例如使用“click”代替“ onclick”或“ mousedown”代替“ onmousedown”。
有關(guān)所有HTML DOM事件的列表，請參考我們完整的HTML DOM事件對象參考。
listener（必需）可以是對事件發(fā)生做出響應(yīng)的JavaScript函數(shù)。
當事件發(fā)生時，事件對象將作為第一個參數(shù)傳遞給函數(shù)。事件對象的類型取決于指定的事件。例如，“click”事件屬于MouseEvent對象。
useCapture（可選）布爾值，指定是在捕獲階段還是冒泡階段執(zhí)行事件。默認為false。
可能的值：

  • true-事件處理程序在捕獲階段執(zhí)行

  • false-事件處理程序在冒泡階段執(zhí)行

您可以在我們的JavaScript事件傳播教程中閱讀有關(guān)事件傳播的更多信息

技術(shù)細節(jié)

返回值：沒有
DOM版本：DOM 2級

更多實例

此示例引用外部“命名”函數(shù)：

document.querySelector("button").addEventListener("click", myFunc);

function myFunc() {
   document.body.style.backgroundColor = "coral";
}
測試看看?/?

您可以向元素添加許多事件，而不會覆蓋現(xiàn)有事件：

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);
測試看看?/?

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

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);
測試看看?/?

傳遞參數(shù)值時，請使用匿名函數(shù)，該函數(shù)使用參數(shù)調(diào)用指定的函數(shù)：

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});
測試看看?/?

相關(guān)參考

JavaScript教程：事件監(jiān)聽器

JavaScript教程：事件傳播

HTML DOM參考：element.removeEventListener()

HTML DOM參考：document.addEventListener()

HTML DOM Element 對象

丰满人妻一级特黄a大片，午夜无码免费福利一级，欧美亚洲精品在线，国产婷婷成人久久Av免费高清