Wie kann die Ereignisdelegation die Leistung und Code-Einfachheit von Vanilla JavaScript verbessern?

Ereignisdelegation mit Vanilla-JavaScript

In Vanilla-JavaScript ist die Ereignisdelegation eine Technik, mit der Ereignis-Listener an ein einzelnes übergeordnetes Element angehängt werden einzelne Elemente darin. Dieser Ansatz verbessert die Leistung, indem die Notwendigkeit mehrerer Ereignis-Listener entfällt und der Code vereinfacht wird.

Effektive Ereignisdelegierung

Um die Ereignisdelegierung effizient zu implementieren, führen Sie die folgenden Schritte aus:

1. Suchen Sie das übergeordnete Element, in dem die Ereignisse auftreten.
2. Fügen Sie einen Ereignis-Listener hinzu übergeordnetes Element für den gewünschten Ereignistyp (z. B. Klick).
3. Überprüfen Sie im Ereignishandler, ob das angeklickte Element mit einem bestimmten Selektor übereinstimmt oder ob seine übergeordneten Elemente mit dem Selektor übereinstimmen.
4. Wenn die Bedingung erfüllt ist erfüllt ist, führen Sie die gewünschte Funktion oder Aktion aus.

Beispiel: jQuery delegieren Code

Bedenken Sie den folgenden jQuery-Code:

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

Um diesen Code in Vanilla-JavaScript zu übersetzen, verwenden Sie Folgendes:

document.querySelector('#main').addEventListener('click', (e) => {
    if (e.target.closest('.focused')) {
        settingsPanel();
    }
});

In diesem Code Wir verwenden querySelector(), um das übergeordnete Element mit der ID main zu finden und einen Click-Event-Listener daran anzuhängen. Wenn auf ein Element innerhalb dieses übergeordneten Elements geklickt wird, prüft es, ob das angeklickte Element oder eines seiner übergeordneten Elemente über die Klasse .focused verfügt. Wenn ja, wird die Funktion „settingsPanel()“ aufgerufen.

Vorteile des Delegierens:

• Verbesserte Leistung: Eliminiert die Notwendigkeit mehrerer Ereignis-Listener, wodurch die Anzahl der Ereignisverarbeitungsfunktionen reduziert wird.
• Vereinfacht Code:Einfacher zu warten und zu verstehen im Vergleich zur Verwendung einzelner Ereignis-Listener für jedes Element.
• Flexibilität:Ermöglicht die dynamische Bindung von Ereignishandlern basierend auf Selektoren, sodass Sie Ereignisse verarbeiten können aus Elementen, die dynamisch hinzugefügt oder entfernt werden können.

Das obige ist der detaillierte Inhalt vonWie kann die Ereignisdelegation die Leistung und Code-Einfachheit von Vanilla JavaScript verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!