Event Delegation

JavaScript 🟢 Junior

Définition

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 reçoit tous les appels de l'immeuble et les redirigé 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, éléments ajoutes après le chargement.

Anti-pattern

Attacher un listener a chaque élément d'une liste de 1000 items au lieu de déléguer au parent.

Termes liés

#core#DOM#performance#interview

En entretien

C'est quoi l'event delegation ?
C'est le fait d'attacher un seul event listener sur un parent au lieu d'un sur chaque enfant, en exploitant le bubbling pour capturer les événements des descendants via event.target. C'est comme un standardiste unique qui reçoit tous les appels de l'immeuble et les redirige vers le bon bureau.
Pourquoi c'est mieux qu'attacher un listener sur chaque élément d'une liste ?
Parce qu'attacher un listener à chaque élément d'une liste de 1000 items coûte cher, alors qu'un seul listener sur le parent suffit. C'est particulièrement utile pour les listes dynamiques ou les éléments ajoutés après le chargement.
Donne-moi un exemple concret de mise en œuvre.
Un addEventListener('click') posé sur le parent #list qui vérifie avec e.target.matches('li.item') puis récupère e.target.dataset.id. Ça marche même pour des lignes ajoutées dynamiquement après coup, sans rebrancher de listener.

Fiche mise à jour le 2026-09-27