🚀 Capítulo 06: EventListeners
🎯 Objetivo da Aula
Ao final desta aula, você saberá como fazer a sua página reagir a ações do usuário (como cliques de botão) usando o método addEventListener.
🏢 O Cenário Prático (Seu Desafio)
O botão de disparo de laser precisa funcionar! Ele está lá na tela, mas não faz nada quando clicado. Seu desafio é ligar um “escopo de evento” (EventListener) nele para que ele dispare quando o usuário clicar!
🧠 Fundamentos: A Teoria Traduzida
Um Evento é qualquer coisa que acontece na página: um clique, passar o mouse, digitar algo, ou até mesmo o carregamento da página.
Para fazer o JavaScript ouvir esse evento, usamos o método addEventListener.
Ele precisa de duas coisas:
- O tipo do evento: Ex:
'click'. - A função: O que deve acontecer quando o evento ocorrer.
📖 Exemplo Guiado: Disparando Laser
<button id="gatilho">Disparar Laser</button>const botao = document.querySelector('#gatilho');
// Ouvindo o clique
botao.addEventListener('click', function() {
alert('💥 Pew Pew! Laser disparado!');
});🛠️ Prática Obrigatória 1
Crie um botão no seu HTML e use o addEventListener para mostrar um alerta escrito “Nave em movimento!” ao ser clicado.
🛠️ Prática Obrigatória 2
Mude o evento de 'click' para 'dblclick' (clique duplo) e veja a diferença.
🔑 Gabarito de Código/Fórmulas
Prática 1:
document.querySelector('button').addEventListener('click', () => {
alert('Nave em movimento!');
});