À retenir
- L'événement part de la cible précise et remonte vers les parents.
- C'est le comportement par défaut de la majorité des événements dans un navigateur.
- Permet de simplifier le code en gérant plusieurs éléments à partir d'un point central.
En programmation web, le bouillonnement est un mécanisme où un événement (comme un clic de souris) se propage du bas vers le haut dans l'arborescence d'une page. Imaginez une bulle d'air qui remonte à la surface : si vous cliquez sur un bouton situé à l'intérieur d'un encadré, l'événement est d'abord détecté par le bouton, puis par l'encadré, et enfin par toute la page.
Étymologie
Traduction directe du terme anglais event bubbling. Cette métaphore illustre la façon dont l'information remonte les couches successives du code HTML, de l'élément le plus précis (la cible) vers le plus général (le document entier).
Exemples d'usage
- Un utilisateur clique sur un lien hypertexte dans un paragraphe : le clic active d'abord le lien, puis remonte au paragraphe, puis à la section qui le contient.
- Cliquer sur une icône dans un bouton de menu déclenche le bouillonnement vers le bouton lui-même.
Cas d'usage
Ce concept est crucial en développement JavaScript pour mettre en place la délégation d'événements. Plutôt que de surveiller chaque bouton d'une longue liste un par un, on place un seul capteur sur le parent pour intercepter tous les événements qui remontent.
Bonnes pratiques
Pour éviter que l'événement ne déclenche des actions indésirables sur les éléments parents, on utilise souvent la commande event.stopPropagation(). C'est utile par exemple pour ouvrir une fenêtre surgissante sans que le clic ne ferme simultanément le menu situé derrière.
Synonymes
Antonymes
Conseil
Visualisez toujours votre structure HTML comme des boîtes gigognes (poupées russes). Quand vous touchez la plus petite, vous interagissez indirectement avec toutes celles qui l'entourent.
Questions fréquentes
Peut-on empêcher le bouillonnement ?
Oui, en utilisant la méthode stopPropagation() en JavaScript, ce qui stoppe la remontée de l'événement.
Quelle est la différence avec la capture ?
La capture est l'exact opposé : l'événement descend du parent vers l'enfant avant de remonter via le bouillonnement.