Propagación de eventos en JavaScript

Imagina que tienes varios bloques anidados uno dentro de otro:

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

Obtenemos referencias a nuestros divs en variables:

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

Y ahora asignamos manejadores de clics a ellos:

elem1.addEventListener('click', function() {
	alert('verde');
});
elem2.addEventListener('click', function() {
	alert('azul');
});
elem3.addEventListener('click', function() {
	alert('rojo');
});

Mostremos nuestros bloques en pantalla, añadiéndoles algo de CSS:

Ahora haz clic en el bloque rojo más interno - y verás cómo el evento primero se activa en el bloque rojo, luego en el azul, y luego en el verde. Y esto es lógico, porque al hacer clic en el bloque interno, estás haciendo clic simultáneamente en todos los bloques externos.

Es decir, resulta que cuando haces clic en el bloque más interno, el evento de clic surge primero en él, luego se activa en su elemento padre, en el padre de su padre y así sucesivamente, hasta llegar a la cima.

Este comportamiento se llama propagación (bubbling) de eventos - por analogía con la burbuja de aire que sube desde el fondo. Así como la burbuja, nuestro evento como si emergiera hacia la superficie, activándose cada vez en bloques más altos.

Escribe por tu cuenta el código que demuestre la propagación de eventos. Comprueba en él la propagación de varios tipos de eventos.

No todos los eventos pueden propagarse. Experimentalmente encuentra al menos un evento que no se propague.