Propagação de Eventos em JavaScript

Imagine que você tem vários blocos aninhados uns dentro dos outros:

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

Vamos obter referências para nossas divs em variáveis:

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

E agora vamos adicionar manipuladores de clique a eles:

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

Vamos exibir nossos blocos na tela, adicionando um pouco de CSS:

Agora clique no bloco vermelho mais interno - e você verá que o evento primeiro será acionado no bloco vermelho, depois no azul, e depois no verde. E isso é lógico, porque ao clicar no bloco interno, você está simultaneamente clicando em todos os blocos externos.

Ou seja, acontece que quando você clica no bloco mais interno, o evento de clique surge primeiro nele, depois é acionado em seu elemento pai, no pai do seu pai e assim por diante, até chegar ao topo.

Este comportamento é chamado de propagação (bubbling) de eventos - por analogia com uma bolha de ar subindo do fundo. Da mesma forma que uma bolha, nosso evento sobe para o topo, sendo acionado a cada vez em elementos mais acima na hierarquia.

Escreva um código por conta própria que demonstre a propagação de eventos. Teste nela a propagação de vários tipos de eventos.

Nem todos os eventos se propagam. Experimentalmente, encontre pelo menos um evento que não se propaga.