emit
Mit der Methode emit können Sie Ereignisse aktiv auslösen, und die ausgelösten Ereignisse besitzen einen Bubble-Mechanismus. Der Bubble-Mechanismus bedeutet, dass das Ereignis von inneren Elementen zu äußeren Elementen aufsteigt und die Ereignisse von innen nach außen in der Hierarchie ausgelöst werden.
Hier ist ein Beispiel, das zeigt, wie die emit-Methode verwendet wird, um benutzerdefinierte Ereignisse auszulösen und mithilfe des Bubbling-Mechanismus Ereignisse 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 Ereignishandler custom-event registriert. Wenn wir das Ereignis mit der emit-Methode auslösen, blubbert das Ereignis vom <li>-Element zum <ul>-Element und löst beide Ereignishandler aus.
Benutzerdefinierte Daten
Durch das Hinzufügen des Parameters data kannst du benutzerdefinierte Daten an den Ereignishandler übergeben:
-
I am target
-
-
In diesem Beispiel übergeben wir benutzerdefinierte Daten an den Ereignishandler über den Parameter data. Der Ereignishandler kann die übergebenen Daten über event.data abrufen.
Ereignis auslösen, ohne zu bubbeln
Wenn Sie nicht möchten, dass ein Ereignis aufsteigt, können Sie beim Auslösen des Ereignisses den Parameter bubbles: false mitgeben:
-
Ich bin target
-
-
In diesem Beispiel haben wir mit dem Parameter bubbles: false ein benutzerdefiniertes Ereignis ausgelöst. Dieses Ereignis wird nicht an übergeordnete Elemente weitergegeben, sodass nur der Ereignishandler des <li>-Elements ausgelöst wird.
Durchdringen des Wurzelknotens
Standardmäßig dringen Ereignisse nicht durch den Shadow-DOM eines benutzerdefinierten Elements. Du kannst jedoch ein benutzerdefiniertes Ereignis durch Setzen von composed: true die Wurzel durchbrechen lassen und so Elemente außerhalb der Wurzel auslösen.
{{loggerText}}
In diesem Beispiel haben wir eine benutzerdefinierte Komponente composed-test erstellt, die ein Element im Shadow DOM und eine Schaltfläche zum Auslösen eines Ereignisses enthält. Standardmäßig dringen Ereignisse nicht durch das Shadow DOM zum Root-Knoten. Wenn wir jedoch beim Auslösen des Ereignisses den Parameter composed: true verwenden, lassen wir das Ereignis zum Root-Knoten durchdringen und lösen ein Element außerhalb des Root-Knotens aus.