JS事件监听与冒泡捕获全解析

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何监听JS事件及事件冒泡捕获详解》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

addEventListener第三个参数填true表示捕获阶段、false表示冒泡阶段；stopPropagation只阻断当前阶段传播，stopImmediatePropagation才彻底中断；事件委托依赖冒泡，需用event.target判断真实触发元素。

JavaScript 事件监听不是“绑了就完事”，冒泡和捕获决定你到底能不能抓到那个点击、输入或键盘事件——不理解这两个阶段，event.stopPropagation() 就像乱按刹车，addEventListener() 的第三个参数就只是个摆设。

addEventListener 的第三个参数到底填 true 还是 false？

这个布尔值控制监听器注册在**捕获阶段**还是**冒泡阶段**。默认是 false（即冒泡阶段），填 true 才进捕获阶段。

• 冒泡阶段：事件从目标元素向上逐级触发父元素的监听器（div > p > span 点击时，先 span，再 p，最后 div）
• 捕获阶段：方向相反，从外向内（div 先响应，然后 p，最后到 span）
• 现代写法更推荐用对象代替布尔值：{ capture: true } 或 { capture: false, once: true }，语义清晰且支持更多选项

为什么 stopPropagation() 有时没用？

因为 event.stopPropagation() 只阻止**当前阶段**的后续传播，不跨阶段。比如你在捕获阶段调用它，冒泡阶段依然会照常发生。

• 如果想彻底中断所有传播，得用 event.stopImmediatePropagation()（还会阻止同一阶段其他同类型监听器）
• 注意：它对 document.addEventListener('click', ...) 或 window 级监听器也有效，但不能阻止浏览器默认行为（比如表单提交），那得用 event.preventDefault()
• 常见误用：在冒泡阶段监听器里调 stopPropagation()，却期望阻止外层捕获阶段已执行过的逻辑——做不到，捕获已经结束了

事件委托靠的是冒泡，但别忘了 target 和 currentTarget 的区别

委托的核心是：把监听器放在父容器，靠事件冒泡上来，再用 event.target 判断真正被点的是谁。但新手常混淆 target 和 currentTarget：

• event.target：最开始触发事件的那个元素（比如你点的是按钮内部的 i 标签）
• event.currentTarget：当前监听器绑定的那个元素（比如你绑在 ul 上，这里就是 ul）
• 做委托时，要用 event.target.matches('button') 或 event.target.classList.contains('delete-btn') 来精准判断，而不是直接操作 event.currentTarget

真正在意事件流向的人，不会只记“冒泡从里往外”，而会打开 Chrome DevTools 的 Elements 面板，勾上 Event Listeners，看每个节点上哪些监听器在捕获、哪些在冒泡——那是唯一不会骗你的现场证据。

今天关于《JS事件监听与冒泡捕获全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！