Immersione negli eventi in JavaScript

Oltre al bubbling degli eventi, esiste anche l'immersione. In realtà, un evento prima scorre dall'alto verso il basso (fase di cattura), raggiunge il nostro elemento (fase di target) e solo allora inizia a risalire (fase di bubbling).

Per impostare un gestore di eventi considerando la fase di cattura, in addEventListener esiste un terzo parametro opzionale. Se è true - l'evento si attiverà durante la fase di cattura, mentre se è false - durante la fase di bubbling (questo è il valore predefinito). Diamo un'occhiata a un esempio:

elem1.addEventListener('click', function() {
	console.log('verde - immersione');
}, true);
elem1.addEventListener('click', function() {
	console.log('verde - bubbling');
}, false);

elem2.addEventListener('click', function() {
	console.log('blu - immersione');
}, true);
elem2.addEventListener('click', function() {
	console.log('blu - bubbling');
}, false);

elem3.addEventListener('click', function() {
	console.log('rosso - immersione');
}, true);
elem3.addEventListener('click', function() {
	console.log('rosso - bubbling');
}, false);

Puoi verificare tu stesso: