HTML DOM addEventListener() 方法

HTML DOM Document对象

document.addEventListener()方法将事件处理程序附加到文档。

使用document.removeEventListener()方法删除与addEventListener()方法一起附加的事件处理程序。

使用element .addEventListener()方法将事件处理程序附加到指定的元素。

语法:

document.addEventListener(event, listener, useCapture)
document.addEventListener("click", function() {
alert("Hello World!!!");
});
测试看看‹/›

浏览器兼容性

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

Method
addEventListener()1171.09

参数值

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

  • false-事件处理程序在冒泡阶段执行

您可以在我们的JavaScript 事件传播教程中阅读有关事件传播的更多信息

技术细节

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

更多实例

将点击事件附加到文档。当用户单击文档中的任何位置时,请在<p>元素中使用id="para"输出“ Hello World”:

document.addEventListener("click", function() {
document.querySelector("#para").innerHTML = "Hello World!!!";
});
测试看看‹/›

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

document.addEventListener("click", myFunc);

function myFunc() {
   document.body.style.backgroundColor = "coral";
}
测试看看‹/›

您可以向文档添加许多事件,而不会覆盖现有事件:

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);
测试看看‹/›

您可以将不同类型的事件添加到文档中:

document.addEventListener("mouseenter", myFunc1);
document.addEventListener("click", myFunc2);
document.addEventListener("mouseout", myFunc3);
测试看看‹/›

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

document.addEventListener("click", function() {
myFunc(x, y);
});
测试看看‹/›

也可以看看

JavaScript教程:事件监听器

JavaScript教程:事件传播

HTML DOM参考:document.removeEventListener()

HTML DOM参考:element .addEventListener()

HTML DOM Document对象