事件：composedPath() 方法
注意：此功能在 Web Workers 中可用。
Event 介面的 composedPath() 方法返回事件的路徑，該路徑是一個將呼叫監聽器的物件的陣列。如果 ShadowRoot 是以其 ShadowRoot.mode 屬性設定為 closed 建立的，則此路徑不包含 shadow tree 中的節點。
語法
composedPath()
引數
無。
返回值
一個代表將呼叫事件監聽器的物件的 EventTarget 物件的陣列。
示例
在下面的示例中，您可以在 https://mdn.github.io/web-components-examples/composed-composed-path/ 處進行嘗試。我們定義了兩個簡單的自定義元素，<open-shadow> 和 <closed-shadow>，它們都將它們的 text 屬性的內容插入到元素的 shadow DOM 中，作為 <p> 元素的文字內容。兩者之間的唯一區別是，它們的 shadow root 是分別以 open 和 closed 模式附加的。
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);
}
},
);
然後，我們在頁面中插入了這兩種元素各一個。
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
接著，在 <html> 元素上包含一個點選事件監聽器。
document.querySelector("html").addEventListener("click", (e) => {
console.log(e.composed);
console.log(e.composedPath());
});
當您分別點選 <open-shadow> 元素和 <closed-shadow> 元素時，您會注意到兩點。首先，composed 屬性返回 true，因為 click 事件總是能夠跨越 shadow 邊界傳播。其次，您會注意到這兩種元素 composedPath 的值存在差異。<open-shadow> 元素的 composed path 是這樣的：
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
而 <closed-shadow> 元素的 composed path 如下：
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
在第二種情況下，事件監聽器只傳播到 <closed-shadow> 元素本身，而不會傳播到 shadow 邊界內的節點。
規範
| 規範 |
|---|
| DOM # ref-for-dom-event-composedpath① |
瀏覽器相容性
載入中…