Prinzip der Ereignisdelegierung in JavaScript

1. Was ist Eventdelegation?

Die Ereignisdelegation wird auch als Ereignisproxy bezeichnet. Dabei wird Event Bubbling verwendet, um alle Ereignisse von untergeordneten Elementen an übergeordnete Elemente zu binden. Wenn das untergeordnete Element das Aufsteigen des Ereignisses verhindert, kann keine Delegierung durchgeführt werden.

Hier ist ein einfaches Beispiel:

Wenn ein Kurier beispielsweise 100 Pakete an 100 Studenten zustellen muss, wird es lange dauern, sie einzeln auszuliefern. Gleichzeitig muss sich jeder Student anstellen, um es zu erhalten, was lange dauert. Wie soll das geschehen? Zu diesem Zeitpunkt kann der Kurier die 100 Express-Pakete dem Klassenlehrer anvertrauen, dieser stellt sie im Büro bereit und die Schüler können sie nach dem Unterricht abholen. Auf diese Weise spart der Kurier Zeit und für die Studierenden ist der Empfang der Pakete bequemer. Bei diesem Vorgang handelt es sich um eine Delegationsveranstaltung.

2. Das Prinzip der Eventdelegation

Anstatt für jeden untergeordneten Knoten einzeln einen Ereignislistener festzulegen, wird der Ereignislistener auf seinem übergeordneten Knoten festgelegt und dann das Bubbling-Prinzip verwendet, um die Einstellung jedes untergeordneten Knotens zu beeinflussen.

Schauen wir uns an, wie es in einem konkreten Programm implementiert wird!
Beispielsweise haben wir jetzt eine ungeordnete Liste mit fünf li darin. Wir möchten jedem li ein Klickereignis hinzufügen. Derzeit besteht unsere normale Vorgehensweise darin, jedem li über eine Schleife ein Klickereignis hinzuzufügen.

Der Code sieht folgendermaßen aus:

<Text>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
    <Skript>
        var li = document.querySelectorAll('li');
        für(var i=0;i<li.length;i++){
            li[i].onclick = Funktion(){
                diese.Stil.Farbe = "grün";
            }
        }
    </Skript>
</body>

Die laufenden Ergebnisse sind:

Mit dieser Methode können wir zwar unseren Klickvorgang realisieren, aber da bei diesem Vorgang das Klickereignis jedes Mal zu li hinzugefügt werden muss, führt dies zu vielen DOM-Zugriffen, was die Interaktionsbereitschaftszeit der gesamten Seite verlängert.

Hier können wir also die Ereignisdelegierung verwenden, d. h. das Klickereignis für ul registrieren und dann das Ziel des Ereignisobjekts verwenden, um das aktuell angeklickte li zu finden. Denn wenn auf li geklickt wird, wird das Ereignis zu ul weitergeleitet, und wenn ul ein registriertes Ereignis hat, wird der Ereignislistener ausgelöst.

Der Implementierungscode lautet:

<Skript>
        var ul = document.querySelector('ul');
        ul.addEventListener('klicken',Funktion(e){
            e.Zielstil.Farbe = "orange";
        })
    </Skript>

Die laufenden Ergebnisse sind:

Erfolgreich angezeigt.

3. Die Rolle der Eventdelegation

Durch die oben genannten Vorgänge erhalten wir Folgendes: Bei der Ereignisdelegation bedienen wir DOM nur einmal, was die Leistung des Programms erheblich verbessert.

Dies ist das Ende dieses Artikels über die Prinzipien der JavaScript-Ereignisdelegierung. Weitere relevante Inhalte zur JavaScript-Ereignisdelegierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!