🚀 Capítulo 09: Propagação
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o conceito de Propagação de Eventos (Event Bubbling) e saberá como pará-la usando e.stopPropagation().
🏢 O Cenário Prático (Seu Desafio)
Você tem um botão de “Ativar Autodestruição” dentro de uma sala de controle. Se você clicar no botão, o alarme da sala toca. Mas o evento “sobe” e faz o alarme da nave inteira tocar também! Seu desafio é parar essa propagação para o alarme não vazar!
🧠 Fundamentos: A Teoria Traduzida
Event Bubbling (Efeito Bolha)
Quando você clica em um botão que está dentro de uma <div>, o evento de clique não acontece só no botão. Ele “sobe” como uma bolha e dispara o clique na <div> também, e depois no <body>, até chegar no topo!
Como parar isso?
Se você não quiser que o evento suba para os elementos pais, você usa a função:
e.stopPropagation()
📖 Exemplo Guiado: Parando a Bolha
<div id="sala" style="padding: 20px; background: gray;">
<button id="botao">Clique Aqui</button>
</div>document.querySelector('#sala').addEventListener('click', () => {
alert('Alarme da Sala disparado!');
});
document.querySelector('#botao').addEventListener('click', (e) => {
alert('Botão clicado!');
e.stopPropagation(); // Impede que o alarme da sala toque!
});🛠️ Prática Obrigatória 1
Crie um exemplo com um botão dentro de uma div. Faça ambos terem um evento de clique que mostra um alerta.
🛠️ Prática Obrigatória 2
Use o e.stopPropagation() no botão e verifique se o alerta da div parou de aparecer.
🔑 Gabarito de Código/Fórmulas
Prática 2:
botao.addEventListener('click', (e) => {
e.stopPropagation();
});