Wie verbessert die Vanilla-JavaScript-Ereignisdelegierung die Leistung gegenüber mehreren einzelnen Ereignis-Listenern?

Vanilla JavaScript Event Delegation: Eine detaillierte Analyse

Hintergrund

Event Delegation ist eine Technik, die verwendet wird, um die Handhabung mehrerer Event-Listener zu vereinfachen, die an verschiedene angeschlossen sind Elemente innerhalb einer DOM-Struktur. In Vanilla-JavaScript kann dies mit .addEventListener() erreicht werden.

Ereignisdelegation in Vanilla JS

Um das in der Frage bereitgestellte jQuery-Beispiel zu übersetzen:

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

... in Vanilla-JavaScript würden wir Folgendes verwenden:

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

Verbesserte Lösung

Allerdings Um die Leistung zu optimieren und übermäßige DOM-Durchquerung zu vermeiden, wird empfohlen, nur den inneren Selektor an .closest() zu übergeben:

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

Codestruktur vereinfachen

Aus Gründen der Lesbarkeit ist es üblich, die Bedingung zu überprüfen innerhalb einer vorzeitigen Rückgabeerklärung:

document.querySelector('#main').addEventListener('click', (e) => {
  if (!e.target.closest('.focused')) {
    return;
  }
  // Remaining code of settingsPanel here
});

Leistungsvergleich

Im Vergleich zur angebotenen Alternativlösung in der Frage (document.getElementById('main').addEventListener('click', doThis);) bietet diese Methode eine verbesserte Leistung, da sie Event-Bubbling verwendet und die Iteration durch zahlreiche untergeordnete Elemente innerhalb von #main vermeidet.

Live-Demo

Um den Unterschied zu veranschaulichen, können Sie auf den Live-Demo-Ausschnitt in der Antwort verweisen. Beim Klicken auf das innere Element (#inner) protokollieren sowohl die Vanilla-JavaScript- als auch die jQuery-Ereignishandler ihre jeweiligen Nachrichten in der Konsole.

Das obige ist der detaillierte Inhalt vonWie verbessert die Vanilla-JavaScript-Ereignisdelegierung die Leistung gegenüber mehreren einzelnen Ereignis-Listenern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!