Tipos de eventos comuns: mouse, teclado, formulário

Agora que você já entendeu o que são eventos, vamos conhecer os tipos mais usados no dia a dia.
Pense nos eventos como “sensores” da página: eles detectam o que a pessoa fez e avisam o JavaScript.

Visão geral

Os 3 grupos mais comuns são:

1. Mouse (clique, passar por cima, tirar o mouse)
2. Teclado (pressionar e soltar teclas)
3. Formulário (digitar, enviar, mudar campo)

1) Eventos de mouse

São eventos ligados ao ponteiro do mouse.

click

Dispara quando o usuário clica em um elemento.

botao.addEventListener("click", function () {
  console.log("Botão clicado");
});

dblclick

Dispara com clique duplo.

imagem.addEventListener("dblclick", function () {
  console.log("Clique duplo na imagem");
});

mouseover e mouseout

• mouseover: quando o mouse entra no elemento
• mouseout: quando o mouse sai

card.addEventListener("mouseover", function () {
  card.classList.add("destaque");
});

card.addEventListener("mouseout", function () {
  card.classList.remove("destaque");
});

2) Eventos de teclado

Usados quando o usuário interage com teclas.

keydown

Dispara quando a tecla é pressionada.

keyup

Dispara quando a tecla é solta.

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

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

Muito útil para:

• atalhos
• jogos
• validações durante digitação

3) Eventos de formulário

São essenciais em páginas com cadastro, login, busca etc.

input

Dispara a cada mudança no valor do campo (tempo real).

campoNome.addEventListener("input", function () {
  console.log("Digitando...");
});

change

Dispara quando o valor muda e o campo “confirma” a alteração
(ex.: perdeu foco, seleção de opção).

selectEstado.addEventListener("change", function () {
  console.log("Estado alterado");
});

submit

Dispara quando o formulário é enviado.

form.addEventListener("submit", function () {
  console.log("Formulário enviado");
});

Exemplo prático juntando tudo

<form id="formBusca">
  <input id="busca" type="text" placeholder="Digite algo">
  <button id="btnBuscar" type="submit">Buscar</button>
</form>
<p id="status">Aguardando...</p>

const formBusca = document.getElementById("formBusca");
const busca = document.getElementById("busca");
const btnBuscar = document.getElementById("btnBuscar");
const status = document.getElementById("status");

btnBuscar.addEventListener("mouseover", function () {
  status.textContent = "Mouse sobre o botão";
});

busca.addEventListener("input", function () {
  status.textContent = "Digitando: " + busca.value;
});

formBusca.addEventListener("submit", function () {
  status.textContent = "Enviando formulário...";
});

Boas práticas

• Use o evento certo para cada intenção.
• Evite excesso de eventos sem necessidade.
• Nomeie funções de forma clara (aoClicar, aoDigitar, aoEnviar).
• Teste interações com calma para evitar comportamentos estranhos.

Resumo da lição

• Eventos de mouse capturam cliques e movimentos do ponteiro.
• Eventos de teclado capturam ações de pressionar/soltar teclas.
• Eventos de formulário capturam digitação, mudanças e envio.
• Dominar esses eventos é base para criar interfaces realmente interativas.