Wie kann ich die Ereignisdelegierung effektiv in Vanilla JavaScript implementieren?

Ereignisdelegation in Vanilla JavaScript: Ein umfassender Leitfaden

Das Erreichen einer Ereignisdelegation in Vanilla JavaScript bietet eine effiziente und wartbare Möglichkeit, mit Ereignis-Listenern umzugehen. Im Gegensatz zur Ereignisdelegation von jQuery, bei der integrierte Prototypen geändert werden, bietet Vanilla JavaScript einen robusteren Ansatz durch die Verwendung der Ereignisdelegation mit „.closest()“.

Übersetzen der jQuery-Ereignisdelegation in Vanilla JavaScript

Um das jQuery-Beispiel zu übersetzen:

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

In Vanilla-JavaScript, wir Verwendung:

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

Die Methode „.closest()“ prüft, ob das angeklickte Element ein übergeordnetes Element hat, das mit dem Selektor „.focused“ übereinstimmt. Wenn ja, wird die Funktion „settingsPanel()“ aufgerufen.

Optimierung für komplexe Ereignisverkettung

Um die Leistung zu verbessern, insbesondere beim Umgang mit verschachtelten Elementen, sollten Sie die Verwendung von in Betracht ziehen vorzeitige Rückkehr:

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

Dieser Ansatz verhindert unnötige Codeausführung, wenn der Selektor „.focused“ nicht vorhanden ist abgeglichen.

Live-Demonstration

Das folgende Code-Snippet zeigt, wie die Ereignisdelegation von Vanilla JavaScript mit „.closest()“ verwendet wird:

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

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

In diesem Beispiel wird durch Klicken auf das Element „#inner“ „vanilla“ in der Konsole protokolliert und so das Ereignis von Vanilla-JavaScript demonstriert Delegation.

Das obige ist der detaillierte Inhalt vonWie kann ich die Ereignisdelegierung effektiv in Vanilla JavaScript implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!