🔄 Entendendo o Borbulhamento de Eventos no DOM

Se você já trabalhou com JavaScript e manipulação de eventos, provavelmente já ouviu falar sobre o termo "event bubbling" — ou, em português, borbulhamento de eventos. Mas o que exatamente isso significa? E por que é tão importante entender esse comportamento ao lidar com o DOM?

🌐 O que é o DOM?

Antes de mergulhar no borbulhamento, vale lembrar que o DOM (Document Object Model) é a estrutura hierárquica que representa os elementos de uma página web. Pense nele como uma árvore, onde cada nó é um elemento HTML — como <div>, <button>, <p>, etc.

💥 O que é Borbulhamento de Eventos?

O borbulhamento de eventos é um processo natural do DOM em que um evento, ao ser disparado em um elemento, primeiro ativa os manipuladores (event listeners) daquele elemento específico, e depois se propaga para seus elementos pai, subindo pela árvore do DOM até chegar ao objeto document.

Exemplo prático:

Imagine o seguinte HTML:

<div id="pai">
  <button id="filho">Clique aqui</button>
</div>

Se você adicionar um click listener tanto no botão quanto na div, ao clicar no botão, o evento será disparado no botão e depois "borbulha" para a div:

document.getElementById('filho').addEventListener('click', () => {
  console.log('Botão clicado');
});

document.getElementById('pai').addEventListener('click', () => {
  console.log('Div clicada');
});

Ao clicar no botão, o console exibirá:

Botão clicado
Div clicada

🧠 Por que isso importa?

Entender o borbulhamento é essencial para:

• Delegação de eventos: você pode adicionar um único listener em um elemento pai para lidar com eventos de múltiplos filhos.
• Prevenção de propagação: usando event.stopPropagation(), você pode impedir que o evento continue subindo pela árvore.
• Controle de fluxo: saber onde e como o evento será tratado evita comportamentos inesperados.

🛑 Interrompendo o Borbulhamento

Se você quiser que o evento não se propague, use:

event.stopPropagation();

Isso é útil quando você quer que apenas o elemento alvo reaja ao evento, sem envolver seus ancestrais.

✅ Conclusão

O borbulhamento de eventos é uma das engrenagens fundamentais do modelo de eventos do DOM. Compreender esse mecanismo permite escrever código mais eficiente, limpo e controlado — especialmente em aplicações interativas e dinâmicas.

Fonte: perguntas e respostas para entrevistas sobre Javascript, escrito por Pratik Bandal

Fonte: Copilot