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

JavaScript中的事件冒泡和事件捕获,是事件在DOM树中传播的两种相反方向机制。默认情况下,事件处理发生在冒泡阶段;而捕获阶段需要显式开启。控制传播的关键,在于理解三阶段事件流,并合理使用事件对象的方法和监听器参数。
事件传播的三个阶段
一次点击等事件触发后,并非只在目标元素上执行,而是经历完整路径:
-
捕获阶段:事件从
window→document→ 祖先元素 → 目标元素,自上而下传递 - 目标阶段:事件到达被点击(或触发)的那个具体元素,此时该元素的监听器执行
-
冒泡阶段:事件从目标元素 → 父元素 →
document→window,自下而上传递
如何区分和启用捕获或冒泡
通过addEventListener的第三个参数决定监听时机:
- 写
false(或省略)→ 在冒泡阶段响应(默认行为) - 写
true→ 在捕获阶段响应 - 旧版IE(IE8及以下)不支持捕获,只认冒泡
注意:onclick等L0级绑定方式只有冒泡,没有捕获能力。
立即学习“Java免费学习笔记(深入)”;
阻止事件继续传播
当不希望事件影响到其他层级时,可用以下方法:
-
e.stopPropagation():立即中断当前阶段及后续阶段的传播(既停捕获也停冒泡) -
e.stopImmediatePropagation():除中断传播外,还阻止同一元素上其他同类型监听器执行 -
e.cancelBubble = true:IE低版本兼容写法(效果同stopPropagation)
事件委托依赖冒泡实现
利用冒泡特性,把事件监听放在父容器上,由它统一处理子元素触发的事件:
- 节省内存:避免为大量子元素重复绑定
- 动态适配:新增子元素无需重新绑定,天然支持
- 关键写法:
e.target获取真正被点击的子元素,再做判断
例如列表项很多时,监听的click,再用e.target.tagName === 'LI'识别点击位置。










