Event Bubbling / Capturing

Définition

Deux phases de propagation des evenements DOM. Capturing descend du document vers la cible, bubbling remonte de la cible vers le document. Par défaut, les listeners écoûtent en phase bubbling.

Analogie

Capturing = le facteur descend l'escalier pour trouver la bonne porte. Bubbling = la nouvelle remonte de voisin en voisin jusqu'au concierge.

Exemple de code

// Bubbling (defaut)
el.addEventListener('click', handler);
// Capturing
el.addEventListener('click', handler, true);
// Ou avec options
el.addEventListener('click', handler, {
  capture: true
});

Cas d'usage

Intercepter des evenements avant qu'ils n'atteignent leur cible (capture), ou déléguer après (bubbling).

Termes liés