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:
立即学习“Java免费学习笔记(深入)”;
-
event.target:最开始触发事件的那个元素(比如你点的是按钮内部的i标签) -
event.currentTarget:当前监听器绑定的那个元素(比如你绑在ul上,这里就是ul) - 做委托时,要用
event.target.matches('button')或event.target.classList.contains('delete-btn')来精准判断,而不是直接操作event.currentTarget
真正在意事件流向的人,不会只记“冒泡从里往外”,而会打开 Chrome DevTools 的 Elements 面板,勾上 Event Listeners,看每个节点上哪些监听器在捕获、哪些在冒泡——那是唯一不会骗你的现场证据。











