Propagación de Eventos en JavaScript

Además del burbujeo de eventos, también existe la propagación. En realidad, el evento primero va de arriba hacia abajo (fase de captura), llega a nuestro elemento (fase de objetivo) y solo entonces comienza a burbujear (fase de burbujeo).

Para asignar un manejador de eventos teniendo en cuenta la fase de captura, en addEventListener existe un tercer parámetro opcional. Si es igual a true, el evento se activará en la fase de captura, y si es false, en la fase de burbujeo (esto es por defecto). Veamos un ejemplo:

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

elem2.addEventListener('click', function() {
  console.log('azul - captura');
}, true);
elem2.addEventListener('click', function() {
  console.log('azul - burbujeo');
}, false);

elem3.addEventListener('click', function() {
  console.log('rojo - captura');
}, true);
elem3.addEventListener('click', function() {
  console.log('rojo - burbujeo');
}, false);

Puedes comprobarlo: