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:

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">發(fā)送</button>
<form id="msgbox"></form>

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

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

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

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

• 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.

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">發(fā)送</button>
<form id="msgbox"></form>

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

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

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.

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

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:

document.getElementById("msgbox").dispatchEvent(event);

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!