Comment puis-je implémenter efficacement la délégation d'événements dans Vanilla JavaScript ?

Délégation d'événements dans Vanilla JavaScript : un guide complet

Réaliser la délégation d'événements dans Vanilla JavaScript fournit un moyen efficace et maintenable de gérer les écouteurs d'événements. Contrairement à la délégation d'événements de jQuery, qui implique la modification de prototypes intégrés, Vanilla JavaScript offre une approche plus robuste grâce à l'utilisation de la délégation d'événements avec '.closest()'.

Traduction de la délégation d'événements jQuery en Vanilla JavaScript

Pour traduire l'exemple jQuery :

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

En JavaScript Vanilla, nous use :

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

La méthode '.closest()' vérifie si l'élément cliqué a un élément parent qui correspond au sélecteur '.focused'. Si tel est le cas, il invoque la fonction « settingsPanel() ».

Optimisation pour le chaînage d'événements complexes

Pour améliorer les performances, en particulier lorsqu'il s'agit d'éléments imbriqués, envisagez d'utiliser un retour anticipé :

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

Cette approche évite l'exécution inutile de code lorsque le sélecteur '.focused' n'est pas matched.

Démonstration en direct

L'extrait de code suivant montre comment utiliser la délégation d'événements de Vanilla JavaScript avec '.closest()' :

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

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

Dans cet exemple, cliquer sur l'élément '#inner' enregistrera "vanilla" sur la console, démontrant l'événement Vanilla JavaScript. délégation.

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!