Event Bubbling / Capturing

Definition

Un evenement DOM se propage en deux phases : capturing (du document vers la cible, de haut en bas) puis bubbling (de la cible vers le document, de bas en haut). Par defaut, les handlers ecoutent en phase de bubbling.

Analogie

Un caillou jete dans l'eau : il descend (capturing) jusqu'au fond (target), puis les ondes remontent a la surface (bubbling).

Exemple de code

parent.addEventListener(class="str">'click', () => console.log(class="str">'parent'), true); class="cmt">// capturing
child.addEventListener(class="str">'click', () => console.log(class="str">'child'));          class="cmt">// bubbling
class="cmt">// Click sur child: class="str">"parent" puis class="str">"child"

Cas d'usage

Intercepter un evenement avant qu'il n'atteigne sa cible, ou le stopper avec stopPropagation().