¿Qué es el evento de 'pop-up' en JavaScript?

Mecanismo mediante el cual un evento iniciado en un elemento DOM se propaga "hacia arriba" a través de la jerarquía hasta su elemento padre, hasta llegar al raíz (document). Por defecto, la mayoría de los eventos pasan por tres fases:

Fase de captura: El evento se desplaza hacia abajo desde el raíz hasta el elemento objetivo. Los oyentes de eventos adjuntos con la opción { capture: true } se activan en esta fase.
Fase de objetivo: El evento llega al elemento objetivo donde fue iniciado. Los oyentes adjuntos directamente a este elemento se activan.
Fase de burbujeo: El evento se desplaza hacia arriba desde el elemento objetivo hasta el raíz del documento. Los oyentes de eventos adjuntos por defecto (sin { capture: true } o con { capture: false }) se activan en esta fase. Esta es la fase en la que ocurre el "burbujeo" en el sentido clásico.

El burbujeo permite implementar la delegación de eventos, donde un solo oyente en un elemento padre maneja eventos de múltiples elementos hijos.

Ejemplo:

// HTML:
// <div id="parent">
//   <button id="child">Haz clic en mí</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('El evento burbujeó hasta el padre');
});

child.addEventListener('click', function() {
  console.log('Evento en el elemento objetivo (botón)');
});

// Al hacer clic en el botón 'child', la secuencia de salida será:
// "Evento en el elemento objetivo (botón)"
// "El evento burbujeó hasta el padre"

El método event.stopPropagation() puede usarse para detener la propagación adicional del evento (tanto en captura como en burbujeo) después de que ha sido manejado por el oyente actual. El método event.stopImmediatePropagation() detiene el burbujeo y evita que otros oyentes en el mismo elemento se activen. event.preventDefault() previene la acción predeterminada del navegador relacionada con el evento, pero no detiene su propagación.