Propagação de Eventos em JavaScript

Além da propagação (bubbling) de eventos, também existe a captura (event capturing). Na verdade, um evento primeiro desce do topo para baixo (fase de captura), atinge o nosso elemento (fase de destino) e só então começa a subir (fase de propagação ou bubbling).

Para adicionar um manipulador de evento considerando a fase de captura, em addEventListener existe um terceiro parâmetro opcional. Se ele for true, o evento será acionado na fase de captura, e se for false - na fase de propagação (este é o padrão). Vamos ver um exemplo:

javascriptelem1.addEventListener('click', function() {
  console.log('verde - captura');
}, true);
elem1.addEventListener('click', function() {
  console.log('verde - propagação');
}, false);

elem2.addEventListener('click', function() {
  console.log('azul - captura');
}, true);
elem2.addEventListener('click', function() {
  console.log('azul - propagação');
}, false);

elem3.addEventListener('click', function() {
  console.log('vermelho - captura');
}, true);
elem3.addEventListener('click', function() {
  console.log('vermelho - propagação');
}, false);

Você pode testar: