Aula 23 — Eventos básicos em JavaScript

Até agora, usamos o JavaScript para selecionar e manipular elementos. Mas páginas modernas precisam ir além: elas devem responder às ações do usuário.

Essas ações são chamadas de eventos.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que são eventos
• Usar o método addEventListener
• Trabalhar com cliques e interações básicas
• Separar comportamento do HTML

🧠 O que é um evento?

Um evento é qualquer ação que acontece na página, geralmente provocada pelo usuário.

Exemplos comuns de eventos:

• clique do mouse
• movimento do mouse
• digitação no teclado
• envio de formulário

🔑 O método addEventListener

A forma moderna e correta de trabalhar com eventos é usando addEventListener.

 elemento.addEventListener("evento", funcao); 

Esse método diz ao JavaScript: “Quando esse evento acontecer, execute essa função.”

🎯 Exemplo: evento de clique

Vamos selecionar um botão e reagir a um clique:

 <button id="meuBotao">Clique aqui</button> 

 
  let botao = document.querySelector("#meuBotao"); 
  botao.addEventListener("click", function() 
  { 
    console.log("Botão clicado!"); 
  }); 

Sempre que o botão for clicado, a mensagem será exibida no console.

🧠 Função anônima e eventos

É muito comum usar funções anônimas em eventos, pois elas são executadas apenas quando o evento acontece.

⚠️ Não use eventos inline

Evite escrever eventos diretamente no HTML, como:

 <button onclick="alert('Oi')">Clique</button> 

🧠 Separação correta de responsabilidades

• HTML → estrutura
• CSS → visual
• JavaScript → comportamento

Usar addEventListener respeita essa separação.

⚠️ E se o elemento não existir?

Se o elemento não existir no DOM, ocorrerá um erro ao adicionar o evento.

▶️ Próxima aula

Na próxima aula, vamos aprender a alterar conteúdo e estilos dos elementos usando JavaScript — e com isso fechamos o módulo básico 🎉