如何用 event.composedPath 获取事件触发经过的所有节点-js教程-PHP中文网

event.composedpath()用于获取事件在shadow dom中的完整传播路径，返回从目标节点到根节点的数组；适用于web components中跨shadow边界精准判断事件来源或委托。

如何用 event.composedpath 获取事件触发经过的所有节点

event.composedPath() 是一个用于获取事件在 Shadow DOM 中传播路径的方法，它返回一个包含事件经过的所有节点（包括 Shadow DOM 内部节点）的数组，从最内层目标节点开始，一直到根节点（通常是 document 或 shadowRoot 的宿主元素）。

什么时候需要使用 composedPath()

当你的页面使用了 Web Components（尤其是带 Shadow DOM 的自定义元素），且事件从 Shadow DOM 内部触发、冒泡到外部 DOM 时，普通 event.path（非标准）或 event.target/event.currentTarget 可能无法反映完整路径——因为 Shadow DOM 有“穿透边界”的限制。而 composedPath() 是标准方法，能准确还原事件真实经过的全部节点链。

例如：点击一个封装在 Shadow DOM 中的按钮，想判断它是否位于某个特定自定义组件内部，或是否经过某类容器，就需要这个路径。

基本用法和返回结构

调用方式很简单：

element.addEventListener('click', (e) => {
  const path = e.composedPath();
  console.log(path); // [button, #shadow-root, my-card, body, html, document]
});

返回数组顺序是：从事件目标开始，逐级向上直到根。注意：

第一个元素是 e.target（实际被点击的节点）
若事件发生在 Shadow DOM 内，#shadow-root 会出现在路径中
宿主元素（即定义 Shadow DOM 的 custom element）也在路径里，紧接在 #shadow-root 之后
外部 DOM 节点（如 body、html、document）照常包含

常见实用场景与判断技巧

你可以结合 composedPath() 做精准的事件委托或上下文判断：

检查是否点击了某个自定义组件内部：
if (e.composedPath().includes(this.shadowRoot.host)) { ... }
查找最近的某类父组件（跨 Shadow 边界）：
const card = e.composedPath().find(el => el.tagName === 'MY-CARD');
排除 Shadow DOM 内部点击，只响应“真正外部”的操作：
const isOutside = !e.composedPath().some(el => el === this || el === this.shadowRoot);