Propagation d'événements en JavaScript

Imaginez que vous ayez plusieurs blocs imbriqués les uns dans les autres :

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

Récupérons des références à nos div dans des variables :

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

Et maintenant, attachons-leurs des gestionnaires de clics :

elem1.addEventListener('click', function() {
	alert('vert');
});
elem2.addEventListener('click', function() {
	alert('bleu');
});
elem3.addEventListener('click', function() {
	alert('rouge');
});

Affichons nos blocs à l'écran, en leur ajoutant un peu de CSS :

Cliquez maintenant sur le bloc rouge le plus à l'intérieur - et vous verrez que l'événement se déclenche d'abord dans le bloc rouge, puis dans le bleu, puis dans le vert. Et c'est logique, car en cliquant sur le bloc intérieur, vous cliquez simultanément sur tous les blocs extérieurs.

Il s'avère donc que lorsque vous cliquez sur le bloc le plus intérieur, l'événement de clic se produit d'abord dans celui-ci, puis se déclenche dans son parent, dans le parent de son parent et ainsi de suite, jusqu'à ce qu'il atteigne le sommet.

Ce comportement est appelé propagation (bubbling) des événements - par analogie avec la remontée d'une bulle d'air du fond. De la même manière qu'une bulle, notre événement remonte vers le haut, en se déclenchant à chaque fois sur des blocs de plus en plus hauts.

Écrivez vous-même le code qui démontrera la propagation des événements. Testez-y la propagation de différents types d'événements.

Tous les événements ne peuvent pas se propager. Trouvez expérimentalement au moins un événement qui ne remontera pas.