javascript事件传播分为捕获、目标、冒泡三阶段:捕获阶段从window逐层向下至目标父级,需显式设置true才触发;目标阶段事件抵达被触发元素,target与currenttarget相等,eventphase为2;冒泡阶段从目标向上回传至window,默认行为,支持事件委托,但focus等部分事件不冒泡。

JavaScript 中事件机制的核心,就是事件在 DOM 树中传播的路径——这个路径被明确划分为三个阶段:捕获、目标、冒泡。理解它们的关键不在于死记顺序,而在于看清“事件从哪来、停在哪、往哪去”。
捕获阶段:从外向内“预热”
事件从 window 开始,依次经过 document → html → body → 祖先元素,最终抵达目标元素的父级(但不进入目标自身)。这个阶段像一次“提前通知”,适合做全局拦截或初始化处理。
- 只有显式设置
addEventListener('click', handler, true)才会触发该阶段的监听器 - 常见用途:在 document 级统一记录点击来源、权限预检、防止误操作提前拦截
目标阶段:事件真正“落地”
这是事件到达实际被点击/触发的那个元素的时刻。无论你用捕获还是冒泡方式绑定,只要监听器绑在目标元素上,它都会在这个阶段执行——只是捕获型监听器会比冒泡型先执行。
-
event.target和event.currentTarget此时相等 -
event.eventPhase值为 2 - 即使父元素阻止了冒泡,目标阶段的监听器仍会照常运行
冒泡阶段:从内向外“扩散”
事件从目标元素出发,逐层向上经过父元素、祖先元素,最终回到 document 和 window。这是默认行为,也是事件委托的基础。
- 省略 addEventListener 第三个参数,或设为
false,即进入此阶段 - 典型应用:用一个父容器监听所有子按钮点击,动态添加的子元素也自动生效
- 注意:
focus、blur、load等事件不冒泡,可用focusin/focusout替代
三个阶段不是并列选项,而是事件传播的自然时间线。一次点击,浏览器严格按捕获→目标→冒泡顺序推进,中间任何阶段都可以用 stopPropagation() 截断后续流程,但不会影响当前阶段已排队的监听器执行。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











