Eventos: Dar Vida à Página

O que vais aprender nesta aula:

  • O que são Eventos (Clicks, Teclas, Rato)
  • O "Ouvinte" de Eventos: addEventListener
  • Como reagir a um clique (Callback Function)

🧠 Teoria (com Analogia e Contexto Real)

Selecionar elementos (Aula 17) não chega. Precisamos que eles FAÇAM alguma coisa quando o utilizador toca neles.

🔔 Analogia da Campainha

O Botão HTML é a campainha na parede.

O JavaScript é a pessoa dentro de casa à espera.

O addEventListener é o ato de "ficar à escuta" do som da campainha para ir abrir a porta (executar a função).

💻 Prática (Orientada e Progressiva)

A fórmula mágica é sempre: Elemento + Ouvinte + Ação.

O Código Padrão

const botao = document.querySelector("#meuBotao");

botao.addEventListener("click", function() {
    alert("Clicaste em mim!");
});

🧪 Área de Testes: O Interruptor

Clica na lâmpada para acender/apagar.

💡

Estado: Apagada

✅ Verificação de Conhecimento

1. Qual o método correto para "escutar" um clique?

element.onClick = ... (Antigo/Não recomendado)
element.addEventListener("click", ...) (Moderno/Correto)
element.listen("click")

2. O que acontece se eu não adicionar um eventListener?

O botão explode.
O clique acontece, mas o JS "ignora" porque não estava à escuta.
O navegador bloqueia o clique.

🏠