HTML DOM addEventListener() 方法
定义和用法
addEventListener() 方法将事件处理程序附加到元素。
实例
例子 1
向 <button> 元素添加 click 事件：
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
例子 2
更紧凑的代码：
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
您可以在页面下方找到更多实例。
语法
element.addEventListener(type, function, useCapture)
参数
| 参数 | 描述 |
|---|---|
| type |
必需。事件的名称。 请不要使用 "on" 前缀。 请使用 "click" 而不是 "onclick"。 |
| function | 必需。事件发生时运行的函数。 |
| useCapture |
可选（default = false）。
|
返回值
无。
技术细节
该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型 type 的事件。如果 useCapture 为 true，则监听器被注册为捕捉事件监听器。如果 useCapture 为 false，它被注册为普通事件监听器。
addEventListener() 可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM 不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的 type 和 useCapture 参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。
当用 Node.cloneNode() 方法或 Document.importNode() 方法复制一个 Document 节点时，不会复制为原始节点注册的事件监听器。
更多实例
例子 3
您可以将许多事件添加到同一元素：
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
例子 4
您可以将不同的事件添加到同一元素：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
例子 5
如需传递参数值，请使用“匿名函数”：
element.addEventListener("click", function() {
myFunction(p1, p2);
});
例子 6
更改 <button> 元素的背景颜色：
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
例子 7
冒泡和捕获的区别：
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
例子 8
删除事件处理程序：
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
浏览器支持
element.addEventListener() 是 DOM Level 2 (2001) 功能。
所有浏览器都完全支持它：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 支持 | 9-11 | 支持 | 支持 | 支持 | 支持 |