JavaScript HTML DOM 事件监听器
addEventListener() 方法
示例
添加一个当用户点击按钮时触发的事件监听器
document.getElementById("myBtn").addEventListener("click", displayDate);
自己尝试 »
addEventListener() 方法将事件处理程序附加到指定的元素。
addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。
您可以将多个事件处理程序添加到一个元素。
您可以将多个相同类型的事件处理程序添加到一个元素，例如两个“click”事件。
您可以将事件监听器添加到任何 DOM 对象，而不仅仅是 HTML 元素，例如 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 对象
The addEventListener() 方法允许您在任何 HTML DOM 对象上添加事件监听器，例如 HTML 元素、HTML 文档、窗口对象或其他支持事件的对象，例如 xmlHttpRequest 对象。
示例
添加一个事件监听器，当用户调整窗口大小时触发
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
自己尝试 »
传递参数
传递参数值时，使用一个“匿名函数”，该函数使用参数调用指定函数
事件冒泡还是事件捕获？
HTML DOM 中有两种事件传播方式：冒泡和捕获。
事件传播是一种定义事件发生时元素顺序的方式。如果您在一个 <div> 元素内部有一个 <p> 元素，并且用户单击 <p> 元素，哪个元素的“click”事件应该首先处理？
在冒泡中，最里面的元素的事件首先处理，然后是外面的元素：<p> 元素的单击事件首先处理，然后是 <div> 元素的单击事件。
在捕获中，最外面的元素的事件首先处理，然后是里面的元素：<div> 元素的单击事件将首先处理，然后是 <p> 元素的单击事件。
使用 addEventListener() 方法，您可以使用“useCapture”参数指定传播类型
addEventListener(event, function, useCapture);
默认值为 false，它将使用冒泡传播，当该值设置为 true 时，事件将使用捕获传播。
示例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
自己尝试 »
The removeEventListener() method
The removeEventListener() method removes event handlers that have been attached with the addEventListener() method
HTML DOM 事件对象参考
有关所有 HTML DOM 事件的列表，请查看我们完整的 HTML DOM 事件对象参考。
