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.
// 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!