Event Delegation

JavaScript 🟢 Junior

Definition

Attacher un seul event listener sur un parent au lieu d'un sur chaque enfant. Exploite le bubbling pour capturer les evenements des descendants via event.target.

Analogie

Un standardiste unique qui recoit tous les appels de l'immeuble et les redirige vers le bon bureau.

Exemple de code

document.getElementById('list')
  .addEventListener('click', (e) => {
    if (e.target.matches('li.item')) {
      handleClick(e.target.dataset.id);
    }
  });

Cas d'usage

Listes dynamiques, tableaux avec beaucoup de lignes, elements ajoutes apres le chargement.

Anti-pattern

Attacher un listener a chaque element d'une liste de 1000 items au lieu de deleguer au parent.

Termes lies

#core#DOM#performance#interview