emit
Mit der emit-Methode kannst du Ereignisse aktiv auslösen, und die ausgelösten Ereignisse verfügen über einen Bubbling-Mechanismus. Der Bubbling-Mechanismus bedeutet, dass Ereignisse vom inneren Element zum äußeren Element aufsteigen und von innen nach außen auf jeder Ebene ausgelöst werden.
Im Folgenden ein Beispiel, das zeigt, wie die emit-Methode verwendet wird, um ein benutzerdefiniertes Ereignis auszulösen und dieses mithilfe des Bubble-Mechanismus an äußere Elemente weiterzugeben:
-
I am target
-
-
In diesem Beispiel haben wir für das <ul>-Element und das <li>-Element jeweils denselben benutzerdefinierten Event-Handler custom-event registriert. Wenn wir die emit-Methode verwenden, um das Event auszulösen, steigt das Event vom <li>-Element zum <ul>-Element auf und löst beide Event-Handler aus.
Benutzerdefinierte Daten
Indem du den data-Parameter mitbringst, kannst du benutzerdefinierte Daten an die Ereignisbehandlung übergeben:
-
Ich bin das Ziel
-
-
In diesem Beispiel haben wir über den data-Parameter benutzerdefinierte Daten an den Ereignishandler übergeben. Der Ereignishandler kann über event.data auf die übergebenen Daten zugreifen.
Ereignis auslösen ohne Bubbling
Wenn du nicht möchtest, dass das Event weitergeleitet wird, kannst du beim Auslösen des Events den Parameter bubbles: false mitgeben:
-
I am target
-
-
In diesem Beispiel haben wir ein benutzerdefiniertes Ereignis mit dem Parameter bubbles: false ausgelöst. Dieses Ereignis wird nicht an übergeordnete Elemente propagiert, sodass nur der Ereignishandler des <li>-Elements ausgelöst wird.
Durchdringung des Root-Knotens
Standardmäßig durchdringen Events nicht den Shadow DOM von benutzerdefinierten Komponenten. Du kannst jedoch composed: true setzen, damit benutzerdefinierte Events den Root-Knoten durchdringen und Elemente außerhalb des Root-Knotens auslösen.
{{loggerText}}
In diesem Beispiel haben wir eine benutzerdefinierte Komponente composed-test erstellt, die ein Element im Shadow DOM und einen Button zur Ereignisauslösung enthält. Standardmäßig durchdringen Ereignisse den Shadow DOM nicht bis zum Wurzelknoten. Durch die Verwendung des Parameters composed: true bei der Ereignisauslösung haben wir jedoch erreicht, dass das Ereignis den Wurzelknoten durchdringt und Elemente außerhalb des Wurzelknotens auslöst.