HTML DOM 文档 addEventListener()
示例
在文档中添加点击事件
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
尝试一下 »
更简单的语法
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
尝试一下 »
更多示例如下。
描述
The addEventListener() 方法将事件处理程序附加到文档。
元素方法
文档方法
教程
语法
document.addEventListener(事件, 函数, 捕获)
参数
| 参数 | 描述 |
| 事件 | 必填。 事件名称。 不要使用“on”前缀。 使用“click”而不是“onclick”。 所有 HTML DOM 事件都列在 HTML DOM 事件对象参考. |
| 函数 | 必填。 当事件发生时要运行的函数。 当事件发生时，事件对象将作为第一个参数传递给函数。事件对象的类型取决于指定的事件。例如，“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 |
