Event: composedPath()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die composedPath()
-Methode der Event
-Schnittstelle gibt den Pfad des Ereignisses zurück, der ein Array der Objekte ist, auf denen Listener aufgerufen werden. Dies umfasst keine Knoten in Shadow-DOM-Bäumen, wenn die Schattenwurzel mit einem geschlossenen ShadowRoot.mode
erstellt wurde.
Syntax
const composed = Event.composedPath()
Parameter
Keine.
Rückgabewert
Ein Array von EventTarget
-Objekten, die die Objekte repräsentieren, auf denen ein Ereignis-Listener aufgerufen wird.
Beispiele
Im folgenden Beispiel, das Sie unter https://mdn.github.io/web-components-examples/composed-composed-path/ ausprobieren können, definieren wir zwei triviale benutzerdefinierte Elemente, <open-shadow>
und <closed-shadow>
, die beide den Inhalt ihres Textattributs nehmen und ihn als Textinhalt eines <p>
-Elements in das Shadow-DOM des Elements einfügen. Der einzige Unterschied zwischen den beiden besteht darin, dass ihre Shadow-Roots mit ihren Modi auf open
und closed
gesetzt sind.
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);
}
},
);
Wir fügen dann jeweils eines dieser Elemente in unsere Seite ein:
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
Dann fügen wir einen Klick-Ereignislistener auf dem <html>
-Element hinzu:
document.querySelector("html").addEventListener("click", (e) => {
console.log(e.composed);
console.log(e.composedPath());
});
Wenn Sie auf das <open-shadow>
-Element und dann auf das <closed-shadow>
-Element klicken, werden Sie zwei Dinge bemerken. Erstens gibt die composed
-Eigenschaft true
zurück, da das click
-Ereignis immer über Schatten-Grenzen hinweg propagieren kann. Zweitens werden Sie einen Unterschied im Wert von composedPath
für die beiden Elemente bemerken. Der composedPath
des <open-shadow>
-Elements ist folgender:
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
Während der composedPath
des <closed-shadow>
-Elements folgendermaßen aussieht:
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
Im zweiten Fall propagieren die Ereignislistener nur bis zum <closed-shadow>
-Element selbst, aber nicht zu den Knoten innerhalb der Schatten-Grenze.
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-event-composedpath① |
Browser-Kompatibilität
BCD tables only load in the browser