Comment la délégation d'événements JavaScript Vanilla améliore-t-elle les performances sur plusieurs écouteurs d'événements individuels ?

Délégation d'événements JavaScript Vanilla : une analyse détaillée

Contexte

La délégation d'événements est une technique utilisée pour simplifier la gestion de plusieurs écouteurs d'événements attachés à différents éléments au sein d’une structure DOM. En JavaScript Vanilla, cela peut être réalisé en utilisant .addEventListener().

Délégation d'événement dans Vanilla JS

Pour traduire l'exemple jQuery fourni dans la question :

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

... dans JavaScript Vanilla, nous utiliserions :

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

Amélioré Solution

Cependant, pour optimiser les performances et éviter une traversée excessive du DOM, il est recommandé de transmettre uniquement le sélecteur interne à .closest() :

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

Simplification de la structure du code

Pour des raisons de lisibilité, il est courant de vérifier l'état dans une déclaration de retour anticipé :

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

Performance Comparaison

Par rapport à la solution alternative fournie dans la question (document.getElementById('main').addEventListener('click', doThis);), cette méthode offre des performances améliorées, car elle utilise le bouillonnement d'événements et évite itérer sur de nombreux éléments enfants dans #main.

Démo en direct

Pour illustrer la différence, vous pouvez vous référer à l'extrait de démonstration en direct fourni dans la réponse. En cliquant sur l'élément interne (#inner), les gestionnaires d'événements Vanilla JavaScript et jQuery enregistreront leurs messages respectifs dans la console.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!