O que é o pop-up em JavaScript?

Mecanismo pelo qual um evento iniciado num elemento DOM se propaga "para cima" através da hierarquia até ao seu elemento pai, até chegar ao raíz (document). Por padrão, a maioria dos eventos passa por três fases:

1. Fase de captura: O evento desce do raíz até ao elemento alvo. Os ouvintes de eventos ligados com a opção { capture: true } ativam-se nesta fase.
2. Fase do alvo: O evento chega ao elemento alvo onde foi iniciado. Os ouvintes ligados diretamente a este elemento ativam-se.
3. Fase de bubbling: O evento sobe do elemento alvo até ao raíz do documento. Os ouvintes de eventos ligados por padrão (sem { capture: true } ou com { capture: false }) ativam-se nesta fase. Esta é a fase em que ocorre o "bubbling" no sentido clássico.

O bubbling permite implementar a delegação de eventos, onde um único ouvinte num elemento pai trata de eventos de múltiplos elementos filhos.

Exemplo:

// HTML:
// <div id="parent">
//   <button id="child">Clica em mim</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('O evento burilhou até ao pai');
});

child.addEventListener('click', function() {
  console.log('Evento no elemento alvo (botão)');
});

// Ao clicar no botão 'child', a sequência de saída será:
// "Evento no elemento alvo (botão)"
// "O evento burilhou até ao pai"

O método event.stopPropagation() pode ser usado para parar a propagação adicional do evento (tanto em captura como em bubbling) após ter sido tratado pelo ouvinte atual. O método event.stopImmediatePropagation() impede o bubbling e evita que outros ouvintes no mesmo elemento sejam ativados. event.preventDefault() impede a ação padrão do navegador relacionada com o evento, mas não impede a sua propagação.