Comment la délégation d'événements avec `closest()` peut-elle optimiser la gestion des événements JavaScript Vanilla ?

Délégation d'événements JavaScript Vanilla : une approche efficace et appropriée

La délégation d'événements est une technique courante en JavaScript qui vous permet d'attacher des auditeurs d'événements à un seul élément parent et déléguer la gestion des événements à ses éléments enfants. Cette approche peut améliorer considérablement les performances en évitant la création d'écouteurs d'événements redondants pour chaque enfant individuel.

Une façon courante d'implémenter la délégation d'événements dans Vanilla JavaScript consiste à utiliser la méthode addEventListener(). Cependant, l'implémentation mentionnée dans la question, qui implique de parcourir tous les enfants de #main, n'est pas optimale en termes de performances.

Une alternative plus efficace consiste à utiliser la méthode close(), qui vérifie si un élément cliqué a un élément parent qui correspond à un sélecteur spécifié. Cela vous permet de déléguer des événements avec plus de précision et d'efficacité.

Par exemple, pour traduire le gestionnaire d'événements jQuery en JavaScript Vanilla en utilisant le plus proche() :

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

Dans ce code, nous sélectionnons d'abord l'élément #main et ajoutez un écouteur d'événement pour l'événement 'click'. Lorsqu'un clic se produit, nous utilisons close() pour vérifier si l'élément cliqué a un élément parent avec la classe '.focused'. Si c'est le cas, nous invoquons la fonction settingsPanel().

Cette approche est efficace car elle vérifie uniquement les éléments nécessaires et ne nécessite pas d'itérer sur tous les enfants de #main. De plus, il réduit les dépendances fragiles en référençant directement l'élément cible.

Lorsque vous travaillez avec des structures profondément imbriquées, garantir que le sélecteur interne ne peut pas également être un élément parent peut optimiser davantage les performances. Des démos en direct et des détails supplémentaires concernant cette approche sont fournis dans le matériel de référence fourni.

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!