So erstellen Sie benutzerdefinierte Ereignisse in JavaScript

JavaScript-Ereignisbehandlung ist die Grundlage aller Clientanwendungen. Wenn am Zielelement ein Ereignis auftritt, beispielsweise ein Tastenklick, eine Mausbewegung, eine Formularübermittlung usw., wird eine Handlerfunktion ausgeführt. Ein an den Handler übergebenes Ereignisobjekt stellt verschiedene Eigenschaften und eine Reihe von Methoden zur Verhinderung von Verstößen bereit.
Ein Nachteil besteht darin, dass Ereignisse zwangsläufig mit DOM-Elementen verknüpft sind. Stellen Sie sich ein einfaches Formular vor, das Informationen vom Benutzer akzeptiert:

your message< /label>
Echomeldungen auf dem Bildschirm beim Absenden eines Formulars, z.
document.getElementById("msgbox").addEventListener("submit", function(e) {
e.preventDefault();
var msg = e.currentTarget.getElementById("msg").value .trim();
if (msg) {
warning(msg);
},
Wenn wir die Nachricht auch als Tweet senden möchten, ist dies der Fall Auf dem Server gespeichert oder andere Aktionen ausführen? Wir haben zwei Möglichkeiten mit vorhandenen Ereignisdelegatenmethoden:

1. Fügen Sie Code zu unserem vorhandenen weiteren Handler hinzu.
Hier müssen wir aktualisieren, da wir unsere Handlerfunktionen jedes Mal verschärft und getestet haben, wenn wir Funktionen hinzufügen, ändern oder entfernen. Es kann Dutzende Verwendungsmöglichkeiten für die veröffentlichte Nachricht geben, und wir versuchen, sie alle im selben Codeblock anzuwenden.
Für jede Verwendung werden 2 weitere Event-Handler erstellt.
Dies führt zu eleganterem Code, was zu Wartungsproblemen führt. Zunächst muss jede Funktion ähnliche Aktionen ausführen, um die Nachricht zu extrahieren und zu validieren. Was ist, wenn wir unser Formular ändern müssen? Wenn wir einfach die ID umbenennen, müssen wir den Ereignisverarbeitungscode für jeden Abonnenten ändern.
Wäre es nicht großartig, wenn wir einfach ein benutzerdefiniertes „newMessage“-Ereignis auslösen könnten, wenn eine gültige Nachricht gepostet wird? Es wäre sogar besser, wenn wir einfach das Dokument oder den Body-Tag überwachen könnten, anstatt auf einen bestimmten Formularknoten zu verweisen . Genau das ermöglichen uns benutzerdefinierte Ereignisse.
Das Auslösen eines benutzerdefinierten Ereignisses ist einfach; wir übergeben den Namen und die Details und wählen ein neues CustomEvent-Objekt aus:
var event = new CustomEvent(
"newMessage",
{
detail: {
Nachricht: „Hallo Welt!“,
Zeit: neues Datum(),
},
Blasen: wahr,
stornierbar: wahr
}
); In diesem Beispiel ist „newMessage“ ein benutzerdefinierter Ereignistyp. Der zweite Parameter ist ein Objekt mit drei Eigenschaften:
Details: Ein untergeordnetes Objekt, das benutzerdefinierte Ereignisinformationen bereitstellt. In diesem Beispiel haben wir eine Nachricht und eine Uhrzeit hinzugefügt.
Blase: Wenn dies zutrifft, wird das Ereignis auf dem Vorfahrenelement, das das Ereignis ausgelöst hat, sprudeln.
Abbrechbar: Wenn dies zutrifft, kann das Ereignis mit der Methode stopPropagation() des Ereignisobjekts abgebrochen werden.
Jetzt müssen wir dieses Ereignis beispielsweise für ein bestimmtes Element auslösen.
document.getElementById("msgbox").dispatchEvent(event);
Beliebig viele Handler können dieses Ereignis mit Code abonnieren wie:
document.addEventListener("newMessage", newMessageHandler, false);

Ein Standard-Ereignishandler sucht oberhalb des übermittelten HTML-Formulars. Diese Funktion ruft die aktuelle Nachricht ab, sofern sie gültig ist, und löst ein neues „newMessage“-Ereignis aus.
var msgbox = document.getElementById("msgbox");
msgbox.addEventListener("submit", SendMessage, false);
// Neue Nachricht: newMessage-Ereignis auslösen
function SendMessage(e) {
e.preventDefault();
var msg = document.getElementById("msg").value.trim();
if (msg && window.CustomEvent) {
var event = new CustomEvent("newMessage", {
                                                          Bubbles: true,
                                                                                                                                                                                                ; Dieses Ereignis wird nur ausgelöst, wenn eine gültige Nachricht vorliegt, und da „bubble“ auf „true“ gesetzt ist, kann das Ereignis auf das Formular oder einen seiner Vorläufer, beispielsweise das Stammdokument, angewendet werden.
//newMessage-Ereignis abhören
document.addEventListener("newMessage", newMessageHandler, false);
// newMessage-Ereignishandler
function newMessageHandler(e) {
LogEvent(
„Ereignisabonnent auf „+e.currentTarget.nodeName+“, „
                                                                                                                                                    Details können selbst extrahiert werden. Ereignisobjekt für Nachrichteneigenschaften.

Browserkompatibilität

Zum Zeitpunkt des Schreibens dieses Artikels sind Chrome, Firefox und Opera das Ziel, die CustomEvent unterstützen. Es ist in den nächtlichen Versionen von Safari verfügbar und wird daher wahrscheinlich bald für den Browser verfügbar sein.

IE9 und niedriger unterstützen keine Objekte. Glücklicherweise unterstützen einige JavaScript-Bibliotheken die Delegation benutzerdefinierter Ereignisse. Suchen Sie daher bald bei SitePoint nach einer browserübergreifenden Lösung.