Comment la délégation d'événements JavaScript Vanilla se compare-t-elle à l'approche de jQuery pour des performances optimales ?

Délégation d'événements dans Vanilla JavaScript pour des performances optimales

Revisiter la syntaxe jQuery

Dans jQuery, la délégation d'événements peut être réalisée à l'aide du code suivant :

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

Traduction vers Vanilla JavaScript

Utilisation de la délégation d'événements dans Le JavaScript Vanilla peut être réalisé via addEventListener. Cependant, il est important d’optimiser l’approche pour plus d’efficacité. Considérez l'alternative suivante :

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

En utilisant la méthode la plus proche(), nous vérifions si l'élément cliqué ou l'un de ses ancêtres correspond au sélecteur .focused. Cela élimine le besoin d'itérer de manière inefficace les éléments enfants.

Garder le code compact

Pour améliorer la compacité du code, la logique principale peut être placée sous une instruction de retour précoce :

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

  // Code of settingsPanel here
});

Exemple d'implémentation

Le code suivant démontre le approche :

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

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

Observez le résultat lors de l'interaction avec les éléments avec les gestionnaires d'événements Vanilla JavaScript et jQuery.

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!