JavaScript DOM EventListener：使用方法、参数与浏览器兼容

addEventListener() 方法概述

addEventListener() 方法

document.getElementById("myBtn").addEventListener("click", displayDate);

语法与参数说明

该方法用于向指定元素添加事件句柄。使用此方法添加的事件句柄不会覆盖已存在的事件句柄，因此可以向一个元素添加多个事件句柄，甚至包括同类型的多个事件（例如两个 "click" 事件）。此外，该方法不仅适用于 HTML 元素，还可用于任何 DOM 对象（如 window 对象）。它提供了更简单的控制事件（冒泡与捕获）的方式，使 JavaScript 代码与 HTML 标记分离，提高了可读性，并允许在无需修改 HTML 标记的情况下添加事件监听。如需移除监听，可使用 removeEventListener() 方法。

element.addEventListener(event, function, useCapture);

语法结构如下：第一个参数指定事件类型（如 "click" 或 "mousedown"）；第二个参数为事件触发后调用的函数；第三个参数为可选的布尔值，用于指定事件是冒泡还是捕获。注意：参数中不要使用 "on" 前缀，例如应使用 "click" 而非 "onclick"。

基本使用示例

示例：向原元素添加事件句柄。当用户点击元素时，弹出 "Hello World!" 提示框。

element.addEventListener("click", function(){ alert("Hello World!"); });

示例：通过函数名引用外部函数。当用户点击元素时，执行外部定义的 myFunction 函数，弹出 "Hello World!" 提示框。

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

多事件与多类型监听

示例：向同一个元素中添加多个事件句柄。addEventListener() 允许向同一元素添加多个事件，且不会覆盖已存在的事件句柄。

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

示例：向同一元素添加不同类型的事件。例如同时监听 "mouseover"、"click" 和 "mouseout" 事件。

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Window 对象与参数传递

示例：向 Window 对象添加事件句柄。该方法适用于 HTML DOM 对象（如 HTML 元素、HTML 文档、window 对象）以及其他事件对象（如 xmlHttpRequest 对象）。当用户重置窗口大小时，添加事件监听以更新内容。

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

示例：传递参数。当需要传递参数值时，使用匿名函数调用带参数的函数。

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡与捕获机制

事件冒泡或事件捕获？事件传递定义了元素事件触发的顺序。若将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素时，需确定哪个元素的 "click" 事件先被触发。在冒泡中，内部元素的事件先被触发，然后触发外部元素（即 <p> 元素的点击事件先触发，然后触发 <div> 元素的点击事件）。在捕获中，外部元素的事件先被触发，然后触发内部元素（即 <div> 元素的点击事件先触发，然后触发 <p> 元素的点击事件）。addEventListener() 方法可通过指定 "useCapture" 参数来设置传递类型。

addEventListener(event, function, useCapture);

默认值为 false，即采用冒泡传递；当值为 true 时，事件使用捕获传递。示例：document.getElementById("myDiv").addEventListener("click", myFunction, true);

尝试一下 »

移除事件监听

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

element.removeEventListener("mousemove", myFunction);

浏览器兼容性与旧版支持

浏览器支持情况如表格所示，数字表示支持该方法的第一个浏览器版本号。 注意：IE 8 及更早版本的 IE，以及 Opera 7.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。对于此类浏览器，可使用 detachEvent() 方法来移除事件句柄。

element.attachEvent(event, function);
element.detachEvent(event, function);

示例：跨浏览器解决方法。通过判断浏览器是否支持 addEventListener 来决定使用标准方法还是 IE 特有的 attachEvent 方法。

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);