Propagação de Eventos em JavaScript

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

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

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

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

E agora vamos adicionar manipuladores de clique a eles:

javascriptelem1.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.