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 |
