Wie schneidet Vanilla JavaScript Event Delegation im Vergleich zum jQuery-Ansatz für optimale Leistung ab?

Ereignisdelegierung in Vanilla-JavaScript für optimale Leistung

Überarbeitung der jQuery-Syntax

In jQuery kann die Ereignisdelegierung mit dem folgenden Code erreicht werden:

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

Übersetzung in Vanilla-JavaScript

Verwendung von Ereignis Die Delegation in Vanilla-JavaScript kann über addEventListener erreicht werden. Es ist jedoch wichtig, den Ansatz im Hinblick auf Effizienz zu optimieren. Betrachten Sie die folgende Alternative:

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

Durch die Verwendung von close() prüfen wir, ob das angeklickte Element oder einer seiner Vorfahren mit dem .focused-Selektor übereinstimmt. Dadurch entfällt die Notwendigkeit einer ineffizienten Iteration durch untergeordnete Elemente.

Code kompakt halten

Um die Codekompaktheit zu verbessern, kann die Hauptlogik unter einer Early-Return-Anweisung platziert werden:

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

  // Code of settingsPanel here
});

Beispielimplementierung

Der folgende Code demonstriert die Ansatz:

document.querySelector('#outer').addEventListener('click', (e) => {
  if (!e.target.closest('#inner')) {
    return;
  }
  console.log('vanilla');
});

$('#outer').on('click', '#inner', () => {
  console.log('jQuery');
});

Beobachten Sie die Ausgabe, wenn Sie mit den Elementen sowohl mit Vanilla-JavaScript- als auch mit jQuery-Ereignishandlern interagieren.

Das obige ist der detaillierte Inhalt vonWie schneidet Vanilla JavaScript Event Delegation im Vergleich zum jQuery-Ansatz für optimale Leistung ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!