So erstellen Sie benutzerdefinierte Ereignisse in JavaScript

Kernpunkte

• JavaScript -Ereignisbehandlung ist die Grundlage aller Client -Anwendungen, sind jedoch mit DOM -Elementen verbunden und sind möglicherweise nicht flexibel genug. JavaScript -benutzerdefinierte Ereignisse lösen dieses Problem und bieten mehr Flexibilität und einfache Wartung.
• Erstellen von JavaScript -benutzerdefinierten Ereignissen enthält Passereignamen, Details und Optionen in ein neues CustomEvent Objekt. Nach der Erstellung können Sie die dispatchEvent -Methode verwenden, um dieses Ereignis auf ein bestimmtes Element zu versenden.
• Mehrere Handler können benutzerdefinierte Ereignisse abonnieren, damit verschiedene Aktionen basierend auf der Veranstaltung ausgeführt werden können. Chrome-, Firefox- und Opernunterstützung benutzerdefinierte Ereignisse sowie einige JavaScript -Bibliotheken bieten ebenfalls Unterstützung.

JavaScript -Ereignisbehandlung ist die Grundlage für alle Client -Anwendungen. Wenn ein Ereignis in einem Zielelement auftritt (z. B. Schaltflächenklicks, Mausbewegungen, Formulareinreichungen usw.), wird die Handler -Funktion ausgeführt. Ein Ereignisobjekt wird an den Handler weitergegeben, der verschiedene Eigenschaften und viele Methoden zur Blockierung des Standardvorgangs bietet. Ein Nachteil ist, dass Ereignisse eng mit DOM -Elementen verbunden sind. Betrachten Sie ein einfaches Formular, das Benutzerkommentare akzeptiert:

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

Wenn wir das Formular einreichen, können wir einen Handler schreiben, um die Nachricht auf den Bildschirm wiederzugeben, zum Beispiel:

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

Was ist, wenn wir auch eine Nachricht als Tweet senden, sie auf dem Server speichern oder andere Aktionen ausführen möchten? Für die vorhandene Ereignisdelegationsmethode haben wir zwei Optionen:

1. Fügen Sie mehr Code in vorhandenen Handlern hinzu. Dies ist nicht flexibel genug, da jedes Mal, wenn eine Funktion hinzugefügt, geändert oder gelöscht wird, die Handler -Funktion aktualisiert und getestet werden muss. Gepostete Nachrichten können Dutzende von Verwendungszwecken haben, und wir versuchen, sie alle auf denselben Codeblock anzuwenden.

2. Erstellen Sie mehr Ereignishandler für jeden Zweck. Dies führt zu einem eleganteren Code, verursacht jedoch Wartungsprobleme. Zunächst muss jede Funktion ähnliche Operationen ausführen, um Nachrichten zu extrahieren und zu überprüfen. Was ist, wenn wir das Formular ändern müssen? Um die ID umzubenennen, muss der Ereignisbearbeitungscode für jeden Abonnenten geändert werden.

Wäre es nicht schön, wenn wir beim Posten einer gültigen Nachricht einfach ein benutzerdefiniertes "NewMessage" -Ereignis auslösen könnten? Es wäre noch besser, wenn wir document oder body Tags überwachen könnten, anstatt bestimmte Formularknoten zu verweisen. Benutzerdefinierte Veranstaltungen ermöglichen es uns, dies zu tun. Das Auslösen eines benutzerdefinierten Ereignisses ist einfach; CustomEvent

In diesem Beispiel ist "NewMessage" der benutzerdefinierte Ereignistyp. Der zweite Parameter ist ein Objekt mit drei Attributen:

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

• detail: Ein untergeordnetes Objekt, das benutzerdefinierte Informationen zu Ereignissen liefert. In diesem Beispiel haben wir eine Nachricht und Zeit hinzugefügt.
• bubbles: Wenn true, wird das Ereignis zum Vorfahren des Elements sprudeln, das das Ereignis ausgelöst hat.
• cancelable: Wenn es true ist, können Sie die stopPropagation() -Methode des Ereignisobjekts verwenden, um das Ereignis abzusagen.

Jetzt müssen wir dieses Ereignis auf ein bestimmtes Element entsenden, z. B.

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

Eine beliebige Anzahl von Handlern kann dieses Ereignis mit dem folgenden Code abonnieren:

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

Demo -Seite

Dieses Beispiel zeigt die Technik: Custom Event Demo -Seite anzeigen. Der Standard -Event -Handler sucht nach Einreichungen des oben genannten HTML -Formulars. Diese Funktion erhält die aktuelle Nachricht und unter der Annahme, dass sie gültig ist, wird ein neues "NewMessage" -Event versandt.

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

Der Handler kann jetzt das "NewMessage" -Event abonnieren. Das Ereignis wird nur ausgelöst, wenn eine gültige Nachricht vorhanden ist und da bubbles auf true eingestellt ist, kann das Ereignis auf das Formular oder einen seiner Vorfahren angewendet werden, wie z. B. die Wurzel document, zum Beispiel:

<code class="language-javascript">document.getElementById("msgbox").dispatchEvent(event);</code>

Die

Die Nachricht selbst kann aus dem Attribut detail.message des Ereignisobjekts extrahiert werden.

Browserkompatibilität

Zum Zeitpunkt des Schreibens, Chrom-, Firefox- und Opernunterstützungsobjekte CustomEvent Objekte. Es ist in der nächtlichen Version von Safari erhältlich, daher wird es wahrscheinlich bald in diesem Browser erhältlich sein. Dieses Objekt wird in IE9 und unten nicht unterstützt. Glücklicherweise unterstützen mehrere JavaScript-Bibliotheken benutzerdefinierte Ereignisdelegierte. Bleiben Sie also auf dem Laufenden, um bald eine Cross-Browser-Lösung zu erhalten.

(Der FAQS-Teil wird hier weggelassen, weil es nicht mit dem pseudooriginalen Ziel übereinstimmt und zu lang ist.)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie benutzerdefinierte Ereignisse in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!