JavaScript DOM addEventListener 方法详解与事件冒泡捕获

作者：小圆点时间：2026-10-23 17:50:07浏览：421

本文详细解析JavaScript中DOM EventListener的功能与用法。重点介绍addEventListener()方法如何为元素添加多个事件句柄，区分事件冒泡与捕获机制，并提供removeEventListener()移除监听及IE低版本兼容方案。

本文通过实例深入解析 JavaScript 中 HTML DOM EventListener 的功能与具体用法，旨在为开发者提供清晰的参考指南。

DOM EventListener

该机制主要用于向指定的 DOM 元素添加事件处理程序。

以下示例展示了如何在用户点击按钮时触发相应的监听事件。


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

调用 addEventListener() 方法添加的事件处理程序，不会覆盖元素上已存在的事件句柄。

开发者可以向同一个元素添加多个不同类型的事件处理程序。


<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

甚至可以向同一元素添加多个相同类型的事件处理程序，例如同时绑定两个 "click" 事件。


<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
  alert ("Hello World!")
}
function someOtherFunction() {
  alert ("函数已执行!")
}
</script>

addEventListener() 不仅适用于 HTML 元素，还可以应用于任何 DOM 对象，包括 window 对象。

该方法允许为 HTML DOM 对象添加事件监听，这些对象包括 HTML 元素、HTML 文档以及 window 对象，甚至包括其他事件对象如 xmlHttpRequest。


<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

使用 addEventListener() 可以更精细地控制事件处理流程，包括对事件冒泡和捕获阶段的控制。

采用 addEventListener() 方法有助于将 JavaScript 代码与 HTML 标记分离，从而提升代码的可读性，并允许在不修改 HTML 标记的情况下添加事件监听。

若需移除通过 addEventListener() 添加的事件监听，可以使用 removeEventListener() 方法。

语法


element.addEventListener(event, function, useCapture);

第一个参数指定事件的类型，例如 "click" 或 "mousedown"。
第二个参数指定事件触发后需要调用的处理函数。
第三个参数是一个可选的布尔值，用于指定事件是以冒泡方式还是捕获方式传递。

注意：在指定事件类型时，不要使用 "on" 前缀。例如，应使用 "click"，而非 "onclick"。

事件冒泡或事件捕获？

事件传递主要包含两种模式：冒泡（Bubbling）与捕获（Capturing）。

事件传递决定了元素事件触发的顺序。假设 <p> 元素嵌套在 <div> 元素中，当用户点击内部的 <p> 元素时，需要确定哪个元素的 "click" 事件先被触发。

在冒泡模式下，内部元素的事件会先被触发，随后才会触发外部元素。即：先触发 <p> 元素的点击事件，再触发 <div> 元素的点击事件。

在捕获模式下，外部元素的事件会先被触发，随后才会触发内部元素。即：先触发 <div> 元素的点击事件，再触发 <p> 元素的点击事件。

可以通过 addEventListener() 方法指定 "useCapture" 参数来设置事件传递的类型。


addEventListener(event, function, useCapture);

该参数的默认值为 false，表示采用冒泡传递；当值设为 true 时，则采用捕获传递。


<script>
document.getElementById("myP").addEventListener("click", function() {
  alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
  alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
  alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
  alert("你点击了 DIV2 元素 !");
}, true);
</script>

removeEventListener() 方法

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


<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

浏览器支持

表格中列出的数字表示支持该方法的第一个浏览器版本号。

方法
addEventListener()	1.0	9.0	1.0	1.0	7.0
removeEventListener()	1.0	9.0	1.0	1.0	7.0

注意：IE 8 及更早版本的 IE 浏览器，以及 Opera 7.0 及其更早版本，均不支持 addEventListener() 和 removeEventListener() 方法。针对此类旧版浏览器，可以使用 detachEvent() 方法来移除事件句柄。


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

以下实例演示了所有浏览器兼容的解决方法。


<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
  x.attachEvent("onclick", myFunction);
}
function myFunction() {
  alert("Hello World!");
}
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09