事件流分捕获→目标→冒泡三阶段：捕获从document逐级向下至目标父级；目标阶段执行被触发元素的监听器；冒泡从目标逐级向上传至document；addeventlistener第三参数true为捕获、false为冒泡，目标阶段均触发。

直接画三层结构最清晰：捕获阶段 → 目标阶段 → 冒泡阶段，每层标清方向、触发顺序和控制方式。

事件流三阶段必须分清

整个事件传播不是“二选一”，而是严格按顺序执行的三个环节：

• 捕获阶段：从 document 开始，逐级向下传到目标元素的父级（不包括目标自身）；
• 目标阶段：事件抵达被点击/触发的那个元素，执行它身上的事件处理函数；
• 冒泡阶段：从目标元素开始，逐级向上传到 document（或 window）。

绑定时机靠第三个参数控制

addEventListener 的第三个参数决定函数在哪一阶段运行：

• true → 捕获阶段执行（例如：el.addEventListener('click', fn, true)）；
• false 或省略 → 冒泡阶段执行（默认行为）；
• 目标阶段无论 true 还是 false 都会触发（只要绑定了该元素）。

实际调试建议用嵌套结构验证

写一个三层 DOM（如 <div id="a"><div id="b"><button id="c">点我</button></div></div>），给 a/b/c 各绑两个监听器：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• a 和 b 的捕获版（true）；
• b 和 c 的冒泡版（false）；
• c 的目标阶段自然也会触发（不管参数）。

点击按钮后控制台输出顺序就是：a捕获 → b捕获 → c目标 → c冒泡 → b冒泡 → a冒泡。

停止传播要明确作用范围

event.stopPropagation() 只阻止后续阶段，不影响当前阶段已注册的同级监听器：

• 在捕获阶段调用 → 后续捕获中断，目标和冒泡照常；
• 在目标阶段调用 → 冒泡被截断，捕获已完成；
• 在冒泡阶段调用 → 后续冒泡节点不再触发。

注意：stopImmediatePropagation() 还会阻止同一阶段其他同类型监听器执行。