JavaScript-Ereignisdelegationsnutzungsanalyse_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben die Verwendung der JavaScript-Ereignisdelegierung. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Klicken Sie auf einen beliebigen Teil der Seite, um ein Ereignis auszulösen

Erstellen Sie eine script1.js-Datei.

Code kopieren Der Code lautet wie folgt:

(function() {
EventUtility.addEvent(document, "click", function(evt) {
alarm('hello');
});
}());

Seitenbereich.

Code kopieren Der Code lautet wie folgt:

 

Ausgabeergebnisse: Wenn Sie auf eine beliebige Stelle auf der Seite klicken, wird ein Feld angezeigt.

Manchmal möchten wir jedoch auf ein Element im Dokument klicken, um ein Ereignis auszulösen.

2. Verwenden Sie die Delegation, um Ereignisse auszulösen

Fügen Sie der Seite ein Tag hinzu.

Code kopieren Der Code lautet wie folgt:

 

                                                                                                                            

Ändern Sie script1.js wie folgt:

Code kopieren Der Code lautet wie folgt:

(function() {

EventUtility.addEvent(document, "click", function(evt) {
//Das Klickobjekt abrufen
        var target = eventUtility.getTarget(evt);
//Den Tag-Namen des angeklickten Objekts abrufen
        var tagName = target.tagName;
​​​​ //Wenn tag ein
ist If (tagName === "A") {
alarm("click me");
//Standardverhalten beim Blockieren von Links
              eventUtility.preventDefault(evt);
}
});
}());

Ausgabeergebnis: Nur wenn auf ein Tag auf der Seite geklickt wird, wird das Feld angezeigt.
Der Vorteil des oben Gesagten ist: Unabhängig davon, wie viele A-Tag-Elemente dem Dokument hinzugefügt werden, können alle A-Tags ausgelöst werden. Ein solcher Ansatz ist die Ereignisdelegation. Wir möchten Ereignisse für untergeordnete Elemente registrieren, registrieren das Ereignis jedoch zunächst auf dem übergeordneten Element des untergeordneten Elements. Auf diese Weise werden alle dynamisch hinzugefügten Elemente desselben Typs wie das untergeordnete Element innerhalb des übergeordneten Elements für das Ereignis registriert.

Wenn wir Ereignisse für Unterelemente registrieren und dann dynamisch Elemente desselben Typs wie Unterelemente im Dokument hinzufügen, müssen wir Ereignisse für diese neu dynamisch hinzugefügten Unterelemente registrieren.

Darüber hinaus nutzt die Event-Delegation das „Event-Bubbling“ sinnvoll aus. Wenn auf ein untergeordnetes Element geklickt wird, erfasst das übergeordnete Element des untergeordneten Elements laut „Ereignisblasen“ das Klickereignis und löst seine eigene Methode aus.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.