Voltar para JavaScript

Eventos

Responda às ações do usuário

Eventos são ações que acontecem na página: cliques, teclas pressionadas, mouse passando sobre elementos, etc. JavaScript pode 'ouvir' esses eventos e reagir.

javascript
// Evento de clique
botao.addEventListener("click", (evento) => {
  console.log("Clicou!", evento.target);
});

// Evento de teclado
document.addEventListener("keydown", (e) => {
  console.log(`Tecla: ${e.key}`);
  if (e.key === "Enter") {
    console.log("Enter pressionado!");
  }
});

// Evento de formulário
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Impede recarregar a página
  const dados = new FormData(form);
  console.log(dados.get("nome"));
});

// Mouse hover
elemento.addEventListener("mouseenter", () => {
  elemento.style.transform = "scale(1.1)";
});
elemento.addEventListener("mouseleave", () => {
  elemento.style.transform = "scale(1)";
});

Use e.preventDefault() em formulários para evitar que a página recarregue ao enviar!