事件：composedPath() 方法

基线 广泛可用

此功能已得到充分确立，并且可以在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用 2020 年 1 月.

注意：此功能在 Web Workers 中可用。

composedPath() 是 Event 接口的方法，它返回事件的路径，该路径是一个将调用侦听器的对象的数组。如果阴影根使用其 ShadowRoot.mode 关闭创建，则此路径不包含阴影树中的节点。

语法

js
const composed = Event.composedPath()

参数

无。

返回值

一个 EventTarget 对象数组，表示将调用事件侦听器的对象。

示例

在以下示例中，您可以在 https://mdn.github.io/web-components-examples/composed-composed-path/ 中试用，我们定义了两个简单的自定义元素，<open-shadow> 和 <closed-shadow>，它们都获取其文本属性的内容，并将其插入到元素的 Shadow DOM 中作为 <p> 元素的文本内容。这两个元素之间的唯一区别在于，它们的阴影根分别以 open 和 closed 模式附加。

js
customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(pElem);
    }
  },
);

customElements.define(
  "closed-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({ mode: "closed" });
      shadowRoot.appendChild(pElem);
    }
  },
);

然后我们将每个元素都插入到我们的页面中

html
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>

然后在 <html> 元素上包含一个点击事件侦听器

js
document.querySelector("html").addEventListener("click", (e) => {
  console.log(e.composed);
  console.log(e.composedPath());
});

当您单击 <open-shadow> 元素，然后单击 <closed-shadow> 元素时，您会注意到两件事。首先，composed 属性返回 true，因为 click 事件始终能够跨阴影边界传播。其次，您会注意到这两个元素的 composedPath 值有所不同。<open-shadow> 元素的组合路径如下

Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]

而 <closed-shadow> 元素的组合路径如下

Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]

在第二种情况下，事件侦听器仅传播到 <closed-shadow> 元素本身，而不是传播到阴影边界内的节点。

规范

规范
DOM 标准
# ref-for-dom-event-composedpath①

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。