JavaScript HTML DOM EventListener
addEventListener() 方法
示例
添加一个事件监听器，当用户点击按钮时触发
document.getElementById("myBtn").addEventListener("click", displayDate);
自己动手试一试 »
addEventListener() 方法将事件处理器附加到指定的元素。
addEventListener() 方法将事件处理器附加到元素，而不会覆盖现有的事件处理器。
您可以为同一个元素添加多个事件处理器。
您可以为同一个元素添加多个相同类型的事件处理器，例如两个“click”事件。
您不仅可以将事件监听器添加到 HTML 元素，还可以添加到任何 DOM 对象。例如 window 对象。
addEventListener() 方法可以更轻松地控制事件如何响应冒泡。
使用 addEventListener() 方法时，JavaScript 与 HTML 标记分离，提高了可读性，并允许您在不控制 HTML 标记的情况下添加事件监听器。
您可以使用 removeEventListener() 方法轻松删除事件监听器。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（例如“click”或“mousedown”或其他 HTML DOM 事件）。
第二个参数是事件发生时要调用的函数。
第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。
请注意，事件前面不要加“on”前缀；请使用“click”而不是“onclick”。
为元素添加事件处理器
示例
当用户点击元素时，弹出“Hello World!”
element.addEventListener("click", function(){ alert("Hello World!"); });
自己动手试一试 »
您也可以引用外部的“命名”函数
示例
当用户点击元素时，弹出“Hello World!”
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
自己动手试一试 »
为同一元素添加多个事件处理器
addEventListener() 方法允许您为同一个元素添加多个事件，而不会覆盖现有事件。
示例
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
自己动手试一试 »
您可以为同一个元素添加不同类型的事件
示例
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
自己动手试一试 »
为 window 对象添加事件处理器
addEventListener() 方法允许您在任何 HTML DOM 对象上添加事件监听器，例如 HTML 元素、HTML 文档、window 对象，或支持事件的其他对象，例如 xmlHttpRequest 对象。
示例
添加一个事件监听器，当用户调整窗口大小时触发
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
自己动手试一试 »
传递参数
传递参数值时，请使用一个“匿名函数”，该函数带有参数调用指定的函数。
事件冒泡还是事件捕获？
HTML DOM 中有两种事件传播方式：冒泡和捕获。
事件传播定义了当事件发生时元素的顺序。如果您有一个包含在 <div> 元素中的 <p> 元素，并且用户点击了 <p> 元素，应该先处理哪个元素的“click”事件？
在冒泡中，最内部元素的事件先处理，然后是外部元素：先处理 <p> 元素的 click 事件，然后处理 <div> 元素的 click 事件。
在捕获中，最外部元素的事件先处理，然后是内部元素：先处理 <div> 元素的 click 事件，然后处理 <p> 元素的 click 事件。
使用 addEventListener() 方法，您可以通过“useCapture”参数指定传播类型。
addEventListener(event, function, useCapture);
默认值为 false，表示使用冒泡传播。当设置为 true 时，事件使用捕获传播。
示例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
自己动手试一试 »
removeEventListener() 方法
removeEventListener() 方法移除已使用 addEventListener() 方法附加的事件处理器。
HTML DOM 事件对象参考
有关所有 HTML DOM 事件的列表，请参阅我们的完整 HTML DOM 事件对象参考。
