17370845950

事件传播分捕获、目标、冒泡三阶段；默认冒泡，addEventListener第三参数为true启用捕获；stopPropagation阻止传播，事件委托利用冒泡实现高效监听。

JavaScript中的事件冒泡和事件捕获，是事件在DOM树中传播的两种相反方向机制。默认情况下，事件处理发生在冒泡阶段；而捕获阶段需要显式开启。控制传播的关键，在于理解三阶段事件流，并合理使用事件对象的方法和监听器参数。

事件传播的三个阶段

一次点击等事件触发后，并非只在目标元素上执行，而是经历完整路径：

• 捕获阶段：事件从window → document → 祖先元素 → 目标元素，自上而下传递
• 目标阶段：事件到达被点击（或触发）的那个具体元素，此时该元素的监听器执行
• 冒泡阶段：事件从目标元素 → 父元素 → document → window，自下而上传递

如何区分和启用捕获或冒泡

通过addEventListener的第三个参数决定监听时机：

• 写false（或省略）→ 在冒泡阶段响应（默认行为）
• 写true → 在捕获阶段响应
• 旧版IE（IE8及以下）不支持捕获，只认冒泡

注意：onclick等L0级绑定方式只有冒泡，没有捕获能力。

阻止事件继续传播

当不希望事件影响到其他层级时，可用以下方法：

• e.stopPropagation()：立即中断当前阶段及后续阶段的传播（既停捕获也停冒泡）
• e.stopImmediatePropagation()：除中断传播外，还阻止同一元素上其他同类型监听器执行
• e.cancelBubble = true：IE低版本兼容写法（效果同stopPropagation）

事件委托依赖冒泡实现

利用冒泡特性，把事件监听放在父容器上，由它统一处理子元素触发的事件：

• 节省内存：避免为大量子元素重复绑定
• 动态适配：新增子元素无需重新绑定，天然支持
• 关键写法：e.target获取真正被点击的子元素，再做判断

例如列表项很多时，监听