本文详解JavaScript中addEventListener的使用，涵盖事件绑定、冒泡与捕获机制的区别，以及通过第三个参数控制事件流。重点解析解绑事件时参数一致性要求，并指出使用箭头函数或匿名函数导致无法正确解绑的常见陷阱，提供完整代码示例。
在JavaScript开发中，利用方法可以高效地绑定事件监听器，具体规范可参考MDN文档中关于addEventListener()的详细说明。
若需移除已绑定的事件，应使用removeEventListener（即MDN文档中removeEventListener()说明）进行解绑操作。
1. 核心功能：addEventListener主要用于实现事件监听与绑定。
该方法接收三个参数：target.addEventListener(type, listener, useCapture)。
其中，type表示监听的事件类型字符串（如click、mouseover等）；listener是处理事件的函数；useCapture默认为false，表示事件冒泡，若设为true则启用事件捕获。
理解事件流是关键，其过程包括事件捕获、到达目标元素和事件冒泡三个阶段。事件捕获指事件从最顶层元素向目标元素传递（由外向内）；事件目标是事件到达的具体节点，若指定不冒泡则在此中止；事件冒泡则是事件从目标元素向其父元素逐级向上传递直至顶层（由内向外）。
具体流程可参考下图所示的事件捕获与冒泡原型图：
2. 实例演示：通过实际案例展示事件绑定的具体行为。
HTML元素中的p是div的子元素，构成嵌套结构。
<div class="div">
<p class="p">addEventListener</p>
</div>（1）默认模式（false）：按事件冒泡触发。
当子元素与父元素同时使用addEventListener绑定事件时，若子元素事件触发，父元素事件将在子元素处理完成后触发，这体现了事件冒泡机制：从内到外，先执行内层p绑定的事件，再执行外层div绑定的事件。
const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, false)
div.addEventListener("click", divClickEvent, false)
function pClickEvent() {
alert("p 元素点击事件触发")
}
function divClickEvent() {
alert("div 元素点击事件触发")
}运行结果如下：
（2）事件捕获模式（true）：
若子元素与父元素同时使用addEventListener绑定事件，且第三个参数设置为true，则事件按捕获形式触发：从外到内，先执行外层div绑定的事件，再执行内层p绑定的事件。
const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, true)
div.addEventListener("click", divClickEvent, true)
function divClickEvent() {
alert("div 元素点击事件触发")
}
function pClickEvent() {
alert("p 元素点击事件触发")
}运行结果如下：
（3）解除绑定（removeEventListener）：
const div = document.querySelector(".div")
const p = document.querySelector(".p")
const btn = document.querySelector(".btn")
div.addEventListener("click", divClickEvent)
p.addEventListener("click", pClickEvent)
function divClickEvent() {
alert("div 元素点击事件触发")
}
function pClickEvent() {
alert("p 元素点击事件触发")
}
btn.onclick = () => {
div.removeEventListener("click", divClickEvent)
p.removeEventListener("click", pClickEvent)
}运行结果如下：
（4）关键注意事项：
（1）若在绑定事件时给addEventListener传递了第三个参数为true，则在解除绑定时也必须给removeEventListener传递相同的第三个参数为true，否则解绑操作将失败。
div.addEventListener("click", divClickEvent, true)
p.addEventListener("click", pClickEvent, true)
若绑定形式如上所述，解绑时必须明确指定true。
div.removeEventListener("click", divClickEvent,true)
p.removeEventListener("click", pClickEvent,true)（2）使用addEventListener绑定时，不推荐使用箭头函数或匿名函数，因为这会导致removeEventListener无法正确解除绑定。
以下情况将导致removeEventListener失效：
div.addEventListener("click", () => {console.log(123, '123')})
div.removeEventListener("click", () => {console.log(123, '123')})本文介绍了JavaScript中addEventListener的使用，更多相关内容请查阅本站往期文章或继续浏览后续章节，感谢支持。