🚀 Capítulo 07: O Objeto Evento
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o que é o Objeto Evento (e ou event) que o navegador nos passa automaticamente quando um evento acontece, e como usar o e.target e o e.preventDefault().
🏢 O Cenário Prático (Seu Desafio)
Quando um laser atinge o painel, precisamos saber exatamente qual parte foi atingida! Seu desafio é usar o objeto evento para descobrir qual botão foi clicado sem precisar criar um código para cada botão!
🧠 Fundamentos: A Teoria Traduzida
Sempre que uma função de evento roda, o navegador passa para ela um objeto cheio de informações sobre aquele evento. Geralmente chamamos esse objeto de e ou event.
Duas coisas muito importantes que esse objeto nos dá:
1. e.target
Te diz exatamente qual elemento foi clicado ou modificado.
- Exemplo: Se você tem 10 botões e clica em um,
e.targetserá aquele botão específico.
2. e.preventDefault()
Serve para cancelar o comportamento padrão que o navegador faria.
- Exemplo: Evitar que um link mude de página ou que um formulário recarregue a tela ao ser enviado.
📖 Exemplo Guiado: Descobrindo o Alvo
document.body.addEventListener('click', function(e) {
// Mostra no console a tag exata que foi clicada
console.log('Você clicou em:', e.target);
});🛠️ Prática Obrigatória 1
Crie um link <a> no seu HTML. Use o e.preventDefault() para evitar que ele mude de página ao ser clicado.
🛠️ Prática Obrigatória 2
Mostre no console o texto do botão que foi clicado usando e.target.innerText.
🔑 Gabarito de Código/Fórmulas
Prática 1:
document.querySelector('a').addEventListener('click', (e) => {
e.preventDefault();
alert('Navegação cancelada!');
});