如何监听javascript事件_事件冒泡和捕获是什么【教程】_网络技术

发布时间 - 2026-01-24 00:00:00 点击率：次

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

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

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

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

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

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

委托的核心是：把监听器放在父容器，靠事件冒泡上来，再用 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，看每个节点上哪些监听器在捕获、哪些在冒泡——那是唯一不会骗你的现场证据。