JavaScript History 对象 HTML DOM Element 对象

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!!!");
});

测试看看‹/›

浏览器兼容性

表中的数字指定了完全支持addEventListener()方法的第一个浏览器版本：

Method
addEventListener()	1	1	7	1.0	9

参数值

参数	描述
event	（必需）事件可以是任何有效的JavaScript事件。使用事件时不使用“on”前缀，例如使用“click”代替“ onclick”或“ mousedown”代替“ onmousedown”。有关所有HTML DOM事件的列表，请参考我们完整的HTML DOM事件对象参考。
listener	（必需）可以是对事件发生做出响应的JavaScript函数。当事件发生时，事件对象将作为第一个参数传递给函数。事件对象的类型取决于指定的事件。例如，“click”事件属于MouseEvent对象。
useCapture	（可选）布尔值，指定是在捕获阶段还是冒泡阶段执行事件。默认为false。可能的值： true-事件处理程序在捕获阶段执行 false-事件处理程序在冒泡阶段执行您可以在我们的JavaScript事件传播教程中阅读有关事件传播的更多信息

技术细节

返回值：	没有
DOM版本：	DOM 2级

更多实例

此示例引用外部“命名”函数：

示例

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

function myFunc() {
   document.body.style.backgroundColor = "coral";
}

测试看看‹/›

您可以向元素添加许多事件，而不会覆盖现有事件：

示例

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);

测试看看‹/›

传递参数值时，请使用匿名函数，该函数使用参数调用指定的函数：

示例

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

测试看看‹/›

相关参考

JavaScript教程：事件监听器

JavaScript教程：事件传播

HTML DOM参考：element.removeEventListener()

HTML DOM参考：document.addEventListener()

HTML DOM Element 对象

JavaScript History 对象 HTML DOM Element 对象