js 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 的事件。如果 useCapture 为 true，则监听器被注册为捕捉事件监听器。如果 useCapture 为 false，它被注册为普通事件监听器。
addEventListener() 可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM 不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的 type 和 useCapture 参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。
当用 Node.cloneNode() 方法或 Document.importNode() 方法复制一个 Document 节点时，不会复制为原始节点注册的事件监听器。
这个方法也在 Document 和 Window 对象上定义了，而且工作方式类似
例子 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);