HTML DOM Document addEventListener() 方法
定义和用法
addEventListener() 方法将事件处理程序附加到文档。
实例
例子 1
向文档添加 click 事件：
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
更简单的语法：
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
例子 2
您可以向文档添加多个事件侦听器：
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
例子 3
您可以添加不同类型的事件：
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
例子 4
传递参数时，使用“匿名函数”调用带参数的函数：
document.addEventListener("click", function() {
myFunction(p1, p2);
});
例子 5
更改文档的背景颜色：
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
例子 6
使用 removeEventListener() 方法：
// 添加事件监听器
document.addEventListener("mousemove", myFunction);
// 移除事件监听器
document.removeEventListener("mousemove", myFunction);
语法
document.addEventListener(type, function, capture)
参数
| 参数 | 描述 |
|---|---|
| type |
必需。事件名称。 请勿使用 "on" 前缀。 请使用 "click" 而不是 "onclick"。 所有 HTML DOM 事件都列在： |
| function |
必需。事件发生时运行的函数。 当事件发生时，将事件对象作为第一个参数传递给函数。 事件对象的类型取决于指定的事件。例如，"click" 事件属于 MouseEvent 对象。 |
| capture |
可选（默认 = false）。
|
返回值
无。
技术细节
该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型 type 的事件。如果 capture 为 true，则监听器被注册为捕捉事件监听器。如果 capture 为 false，它被注册为普通事件监听器。
addEventListener() 可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM 不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的 type 和 capture 参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。
当用 Node.cloneNode() 方法或 Document.importNode() 方法复制一个 Document 节点时，不会复制为原始节点注册的事件监听器。
这个方法也在 Document 和 Window 对象上定义了，而且工作方式类似。
浏览器支持
document.addEventListener 是 DOM Level 2 (2001) 特性。
所有浏览器都完全支持它：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 支持 | 9-11 | 支持 | 支持 | 支持 | 支持 |