Propagation des événements en JavaScript

En plus de la propagation des événements, il y a aussi la capture. En réalité, l'événement descend d'abord de haut en bas (stade de capture), atteint notre élément (stade cible) et ne commence qu'ensuite à remonter (stade de propagation).

Afin d'attacher un gestionnaire d'événement en prenant en compte le stade de capture, dans addEventListener il existe un troisième paramètre optionnel. Si il est égal à true - l'événement se déclenchera au stade de capture, et si false - au stade de propagation (c'est la valeur par défaut). Regardons un exemple :

elem1.addEventListener('click', function() {
	console.log('vert - capture');
}, true);
elem1.addEventListener('click', function() {
	console.log('vert - propagation');
}, false);

elem2.addEventListener('click', function() {
	console.log('bleu - capture');
}, true);
elem2.addEventListener('click', function() {
	console.log('bleu - propagation');
}, false);

elem3.addEventListener('click', function() {
	console.log('rouge - capture');
}, true);
elem3.addEventListener('click', function() {
	console.log('rouge - propagation');
}, false);

Vous pouvez vérifier :