Explication du bubbling et capturing (inactif pour l'automne 2021, consultez LOG2420 sur Moodle)
Un clic dans les div d2 et d3 touchera plusieurs éléments de l'arbre DOM qui "écoutent" (listen) les clics de souris. Par "écouter", on signifie ici qu'une fonction de rappel est enregistrée auprès de cet élément, pour un événement en particulier. Se pose alors la question de l'ordre dans lequel le gestionnaire d'événements assignera les fonctions de rappels correspondantes sur le fil des événements.
De manière générale, l'assignation de l'événement dans un système de fenêtrage se base sur la structure en arbre des éléments de l'interface. Lorsqu'un événement survient, sa position permet de déterminer les éléments touchés. Une descente à partir de la racine de l'arbre dans les éléments qui recoupent cette position est faite, puis une remontée. Chaque élément qui "écoute" l'événement verra la fonction de rappel correspondante ajoutée au fil d'exécution des événements durant une ou l'autre des phases, ascendant ou descendant. Le choix de la phase est arbitraire et dépend de l'environnement.
Dans le cas d'un fureteur web, le principe du "bubbling" est d'ajouter les fonctions de rappel au fil des événements dans l'ordre ascendant, tandis que le "capturing" consiste à les ajouter dans l'ordre descendant. Le "bubbling" est le comportement par défaut qui s'applique à la majorité des fureteurs. C'est l'inverse lors du "capturing" : les éléments plus près de la racine du DOM verront leur "écouteurs" assignés en premier sur le fil des événements.
Il est aussi possible d'annuler le "bubbling" (event.stopPropagation()). Voir les deux exemples suivants :