JavaScript事件传播依次经历捕获阶段（从document到目标元素，触发捕获监听器）、目标阶段（事件抵达target，触发该元素监听器）和冒泡阶段（从目标向上至document，触发冒泡监听器），顺序固定不可跳过。
JavaScript事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段，它们按固定顺序依次发生，且不可跳过（除非手动中断）。
捕获阶段：从根节点向下传递到目标元素
事件从document开始，逐层经过祖先元素，直到抵达事件实际触发的**目标元素**。这个过程不触发目标元素上的事件监听器（除非显式指定useCapture = true），但会触发沿途祖先上设置了捕获模式的监听器。
- 监听器需通过
addEventListener(type, handler, true)或{capture: true}启用捕获 - 例如点击一个
<button>，捕获路径为：document → html → body → div（父容器）→ button（目标） - 捕获阶段常用于在事件到达目标前统一拦截或预处理（如权限检查、日志记录）
目标阶段：事件抵达绑定的目标元素
当事件到达绑定事件监听器的那个元素（即event.target）时，进入目标阶段。此时无论监听器是捕获还是冒泡模式，都会被触发（捕获监听器已在上一阶段执行过，所以这里只执行冒泡模式监听器；但如果监听器同时注册了两种模式，则目标阶段会执行两次）。
- 目标阶段没有“方向”，它是传播路径的顶点
- 如果目标元素有多个同类型监听器，按注册顺序执行
-
event.eventPhase值为2（Event.AT_TARGET）
冒泡阶段：从目标元素向上传递至根节点
目标阶段结束后，事件开始沿父级链向上“冒泡”，依次触发所有祖先元素上注册的冒泡模式监听器（默认行为，useCapture = false）。这是最常用、也最容易观察到的阶段。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 冒泡路径与捕获相反：
button → div → body → html → document - 可通过
event.stopPropagation()阻止后续冒泡，但不影响当前已触发的监听器 - 注意：
focus、blur、mouseenter、mouseleave等事件不冒泡
完整流转示例与关键细节
假设HTML结构为<div id="outer"><button id="inner">Click</button></div>，并注册如下监听器：
-
document.addEventListener('click', h1, true)（捕获） -
outer.addEventListener('click', h2, true)（捕获） -
inner.addEventListener('click', h3)（默认，冒泡） -
outer.addEventListener('click', h4)（默认，冒泡） -
document.addEventListener('click', h5)（默认，冒泡）
点击inner时执行顺序为：h1 → h2 → h3 → h4 → h5。其中h1和h2在捕获阶段运行，h3在目标阶段运行，h4和h5在冒泡阶段运行。
整个流程由浏览器内核严格控制，开发者不能改变阶段顺序，但可以利用event.stopImmediatePropagation()阻止同一阶段后续监听器，或用event.cancelBubble = true等效于stopPropagation()。
