事件冒泡是dom事件从目标元素逐级向父元素传播的过程，点击span会依次触发span→div→body→document；默认多数事件冒泡，可用stoppropagation()阻止，event.target与currenttarget可区分触发源和当前处理元素。

事件冒泡阶段是 DOM 事件传播的默认行为之一：当某个元素上的事件被触发后，它会先在该元素上执行（目标阶段），然后**自动向父元素、祖父元素……逐级向上触发相同类型的事件**，直到 document（或 shadow root 边界）为止。

冒泡是怎么发生的？

只要没被显式阻止，点击、输入、keyup 等大多数事件都会冒泡。比如：

你点击一个 ，它嵌套在

里，

又在 中。点击瞬间，事件会按顺序触发：
→ span（目标）
→ div（父）
→ body（祖）
→ document

如何监听冒泡阶段的事件？

直接给祖先元素绑定事件监听器即可，不需要额外设置参数（因为默认就是捕获关闭、冒泡开启）：

dmap-jsapi-skill

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

下载

• 用 addEventListener(type, handler)，第三个参数省略或设为 false（默认值）
• 用 onclick="..." 这类内联属性，也天然支持冒泡
• 注意：不是所有事件都冒泡，例如 focus、blur、mouseenter、mouseleave 默认不冒泡（但有对应的冒泡版如 focusin/focusout）

怎么阻止向上冒泡？

在事件处理函数中调用 event.stopPropagation()：

• 它只阻止当前事件继续向上传播，不影响同一元素上其他监听器执行
• 如果想连当前元素的其他监听器也不执行，用 event.stopImmediatePropagation()
• 注意：return false 在 jQuery 中等价于 stopPropagation + preventDefault，但在原生 JS 中只是退出函数，不会阻止冒泡

怎么知道当前事件处于哪一层？

利用事件对象的几个关键属性：

• event.target：最开始被点击/触发的那个原始元素（不会变）
• event.currentTarget：当前正在执行监听器的那个元素（随着冒泡逐级变化）
• 可对比两者是否相等来判断是否到达目标元素，或用 event.currentTarget.parentElement 手动向上查