Event Bubbling / Capturing

Definition

Deux phases de propagation des evenements DOM. Capturing descend du document vers la cible, bubbling remonte de la cible vers le document. Par defaut, les listeners ecoutent 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 deleguer apres (bubbling).

Termes lies