无需登录 数据私有 本地保存

事件冒泡/捕获演示 - 交互模型可视化

10
0
0
0

事件冒泡与捕获 - 交互演示

点击嵌套盒子观察DOM事件传播过程，直观理解捕获阶段、 目标阶段和冒泡阶段

捕获阶段 ↓ 目标阶段 🎯 冒泡阶段 ↑
传播路径
← 内层
路径:
📦 Level 1 · 最外层
🏠
祖先容器
📁 Level 2
📦
父元素
📄 Level 3
📁
子元素
🎯 Level 4 · 最内层
🎯
目标元素
点击任意层级盒子触发事件演示 · 观察左侧路径指示器和盒子高亮变化
控制面板
快 慢 400ms
选择阻止传播的位置，观察事件传播被截断
就绪 - 点击嵌套盒子开始演示
事件日志 0

点击盒子查看事件传播日志

常见问题 & 知识点

什么是事件捕获？

事件捕获是DOM事件传播的第一阶段。事件从Window对象开始，沿着DOM树向下传播，经过Document、html、body等祖先节点，最终到达触发事件的目标元素。使用addEventListener(type, fn, true)在捕获阶段监听。

什么是事件冒泡？

事件冒泡是DOM事件传播的第三阶段。事件从目标元素开始，沿着DOM树向上传播，依次经过父元素、祖先元素，直到Window对象。大多数事件默认在冒泡阶段触发。使用addEventListener(type, fn, false)或省略第三个参数即可。

事件传播的三个阶段

DOM事件传播分为三个阶段：①捕获阶段（从Window到目标）、②目标阶段（事件到达目标元素，按注册顺序执行）、③冒泡阶段（从目标到Window）。event.eventPhase可查看当前阶段（1=捕获，2=目标，3=冒泡）。

如何阻止事件冒泡？

使用event.stopPropagation()阻止事件继续传播。调用后，事件不会传播到下一个节点。stopImmediatePropagation()更彻底——不仅阻止传播，还阻止同一元素上后续监听器的执行。

什么是事件委托？

利用事件冒泡机制，将监听器绑定在父元素上，通过event.target判断实际触发元素。这样无需为每个子元素单独绑定事件，特别适合动态添加的元素。是前端性能优化的重要技巧。

event.target vs currentTarget

event.target是实际触发事件的元素（最内层被点击的元素），始终不变。event.currentTarget是当前处理事件的元素（即监听器绑定的元素），在传播过程中会变化。这是事件委托的核心原理。

哪些事件不支持冒泡？

并非所有事件都会冒泡。以下常见事件不冒泡：focus、blur、load、unload、scroll（在元素上）、mouseenter、mouseleave、resize等。可用对应的冒泡事件替代（如focusin/focusout代替focus/blur）。

addEventListener第三参数

第三个参数可以是布尔值（true=捕获阶段，false=冒泡阶段，默认false）或配置对象：{capture, once, passive}。其中passive: true可提升滚动性能，once: true使监听器只触发一次。

实际开发中的最佳实践

①优先使用事件委托减少监听器数量；②在不需要时移除监听器避免内存泄漏；③滚动事件使用passive: true；④合理使用stopPropagation避免意外触发；⑤理解传播机制有助于调试复杂交互。

🔧 相关工具