Eventos: reagindo ao que o usuário faz (cliques, digitação)

Até aqui, você aprendeu a selecionar e alterar elementos no DOM.
Agora chegou a parte que deixa a página viva: os eventos.

O que é um evento?

Um evento é algo que acontece na página, por exemplo:

• usuário clica em um botão
• usuário digita em um campo
• usuário envia um formulário
• mouse passa por cima de um elemento

Pense como uma campainha:
quando alguém toca (evento), alguma ação acontece (função JavaScript).

A base de tudo: addEventListener

Para “ouvir” um evento, usamos:

elemento.addEventListener("tipoDoEvento", funcao);

• tipoDoEvento: o nome do evento (click, input, keydown...)
• funcao: o que deve acontecer quando o evento ocorrer

Exemplo 1: clique em botão (click)

<button id="btn">Clique aqui</button>
<p id="msg">Aguardando clique...</p>

const btn = document.getElementById("btn");
const msg = document.getElementById("msg");

btn.addEventListener("click", function () {
  msg.textContent = "Você clicou no botão!";
});

Sempre que o botão for clicado, o texto muda.

Exemplo 2: digitação em campo (input)

<input id="nome" type="text" placeholder="Digite seu nome">
<p id="saida"></p>

const nome = document.getElementById("nome");
const saida = document.getElementById("saida");

nome.addEventListener("input", function () {
  saida.textContent = "Você digitou: " + nome.value;
});

Enquanto a pessoa digita, a mensagem é atualizada em tempo real.

Evento de teclado (keydown)

document.addEventListener("keydown", function () {
  console.log("Uma tecla foi pressionada");
});

Isso é útil para atalhos, jogos simples e interações por teclado.

Função nomeada também funciona

Em vez de função anônima, você pode separar a lógica:

function mostrarClique() {
  console.log("Clicou!");
}

btn.addEventListener("click", mostrarClique);

Isso ajuda na organização do código.

Removendo um ouvinte de evento

Também dá para parar de ouvir um evento com removeEventListener, usando a mesma função de referência.

function acao() {
  console.log("Clique ativo");
}

btn.addEventListener("click", acao);
// depois...
btn.removeEventListener("click", acao);

Boas práticas rápidas

• Selecione o elemento corretamente antes de adicionar evento.
• Use nomes claros para funções (aoClicarSalvar, aoDigitarNome).
• Evite repetir vários listeners iguais sem necessidade.
• Prefira mensagens e comportamentos simples e previsíveis.

Resumo da lição

• Eventos são ações que acontecem na página.
• addEventListener conecta um evento a uma função.
• Eventos comuns iniciais: click, input, keydown.
• Com eventos, a página reage ao usuário em tempo real.
• Esse é um dos pilares da interatividade com JavaScript.