Wie kann die Ereignisdelegation mit „closest()' die Vanilla-JavaScript-Ereignisbehandlung optimieren?

Vanilla JavaScript Event Delegation: Ein effizienter und richtiger Ansatz

Event Delegation ist eine gängige Technik in JavaScript, mit der Sie Event-Listener anhängen können ein einzelnes übergeordnetes Element und delegieren die Ereignisbehandlung an seine untergeordneten Elemente. Dieser Ansatz kann die Leistung erheblich verbessern, indem die Erstellung redundanter Ereignis-Listener für jedes einzelne Kind vermieden wird.

Eine gängige Methode zur Implementierung der Ereignisdelegierung in Vanilla-JavaScript ist die Methode addEventListener(). Allerdings ist die in der Frage erwähnte Implementierung, die das Durchlaufen aller untergeordneten Elemente von #main beinhaltet, nicht optimal für die Leistung.

Eine effizientere Alternative ist die Verwendung der Methode close(), die prüft, ob ein angeklicktes Element vorliegt verfügt über ein übergeordnetes Element, das einem angegebenen Selektor entspricht. Dadurch können Sie Ereignisse genauer und effizienter delegieren.

Zum Beispiel, um den jQuery-Ereignishandler mithilfe von close() in Vanilla-JavaScript zu übersetzen:

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

In diesem Code wählen wir zuerst aus das #main-Element und fügen Sie einen Ereignis-Listener für das „Click“-Ereignis hinzu. Wenn ein Klick erfolgt, überprüfen wir mithilfe von close(), ob das angeklickte Element ein übergeordnetes Element mit der Klasse „.focused“ hat. Wenn dies der Fall ist, rufen wir die Funktion „settingsPanel()“ auf.

Dieser Ansatz ist effizient, da nur die erforderlichen Elemente überprüft werden und nicht alle untergeordneten Elemente von #main durchlaufen werden müssen. Darüber hinaus werden fragile Abhängigkeiten reduziert, indem direkt auf das Zielelement verwiesen wird.

Bei der Arbeit mit tief verschachtelten Strukturen kann die Leistung weiter optimiert werden, indem sichergestellt wird, dass der innere Selektor nicht auch ein übergeordnetes Element sein kann. Live-Demos und zusätzliche Details zu diesem Ansatz finden Sie im angegebenen Referenzmaterial.

Das obige ist der detaillierte Inhalt vonWie kann die Ereignisdelegation mit „closest()' die Vanilla-JavaScript-Ereignisbehandlung optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!