事件流分捕获→目标→冒泡三阶段：捕获从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() 还会阻止同一阶段其他同类型监听器执行。
