事件捕获是从window开始由外向内逐层触发至目标元素父级,需显式设置addEventListener第三个参数为true;捕获阶段不包含目标自身,目标阶段独立于捕获与冒泡;完整事件流顺序为捕获→目标→冒泡。

事件捕获是从外向内逐层触发
事件捕获的起点是 window(或 document),然后依次经过 <html>、<body>、外层容器、中间容器,最终到达被点击的那个最内层元素。这个过程就像从高空俯冲而下,路径是确定且单向的。
必须显式开启才能进入捕获阶段
默认情况下,addEventListener 只在冒泡阶段响应事件。要让监听器在捕获阶段执行,必须把第三个参数设为 true:
-
elem.addEventListener('click', handler, true)→ 捕获阶段执行 -
elem.addEventListener('click', handler)或false→ 冒泡阶段执行
捕获阶段只走到目标元素的父级,不包含目标自身
严格来说,标准事件流中捕获阶段止步于目标元素的直接父节点;目标元素上的捕获监听器其实属于“目标阶段”的一部分,而非纯粹的捕获传播路径。例如:
- HTML 结构:
<div id="A"><div id="B"><button id="C">点我</button></div></div> - 点击
#C时,捕获顺序是:#A→#B(两者都设了true) -
#C上带true的监听器会执行,但它属于“目标阶段”,不是捕获传播的延续
捕获与冒泡可共存,执行顺序固定
如果多个层级同时注册了捕获和冒泡监听器,完整执行顺序始终是:
立即学习“Java免费学习笔记(深入)”;
- 所有捕获阶段监听器(从外到内)
- 目标元素上所有监听器(无论
true还是false,按注册顺序) - 所有冒泡阶段监听器(从内到外)
这个三段式流程是 DOM 标准定义的,浏览器严格执行,不因代码书写顺序改变。


















