Aula 54 — Event handler, evento → callback e objeto event

Até aqui, usamos eventos o tempo todo: cliques, interações, botões, listas, delegação…

Mas agora é hora de dar um passo importante:

entender o que realmente acontece quando um evento ocorre no JavaScript.

Nesta aula, vamos desmontar o funcionamento dos eventos peça por peça.

🎯 Objetivo da aula

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

• Entender o que é um evento
• Entender o que é um event handler
• Compreender o fluxo evento → callback
• Usar corretamente o objeto event
• Ler eventos com mais consciência

O que é um evento?

Um evento é qualquer ação que acontece na página.

Exemplos:

• Um clique do mouse
• Uma tecla pressionada
• O carregamento da página
• Uma mudança em um campo de texto

O navegador detecta essas ações e avisa o JavaScript:

👉 “Algo aconteceu aqui.”

O que é um event handler?

Um event handler é uma função que será executada quando um evento acontecer.

Em português claro:

👉 “Quando isso acontecer, execute essa função.”

Exemplo simples de event handler

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

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

 console.log("Botão clicado"); // Saída será exibida quando o usuário clicar no botão 

Aqui:

• "click" → o evento
• a função → o event handler

O fluxo evento → callback

Vamos entender o que acontece por trás:

1. O usuário interage com a página
2. O navegador detecta o evento
3. O JavaScript chama a função associada

Esse modelo é chamado de programação orientada a eventos.

O que é o objeto event?

Quando um evento acontece, o navegador cria um objeto com informações sobre ele.

Esse objeto é o event.

Ele contém dados como:

• Qual elemento disparou o evento
• Tipo do evento
• Posição do mouse
• Tecla pressionada

Recebendo o objeto event

O objeto event é passado automaticamente para o handler:

 botao.addEventListener("click", function (event) { console.log(event); }); 

O nome pode ser qualquer um, mas event ou e são os mais comuns.

Propriedades importantes do event

Algumas propriedades muito usadas:

• event.type → tipo do evento
• event.target → elemento que disparou
• event.currentTarget → onde o listener está

 botao.addEventListener("click", function (event) { console.log(event.type); console.log(event.target); }); 

 console.log(event.type); // Saída será "click"

console.log(event.target);
// Saída será o elemento clicado

Event handler não é executado imediatamente

Isso é muito importante:

Ela fica registrada e só será chamada quando o evento acontecer.

Resumo mental da aula

• Evento → algo acontece
• Event handler → função que reage
• Callback → função chamada pelo navegador
• event → informações sobre o ocorrido

Na próxima aula, vamos falar sobre DOMContentLoaded, load e quando usar cada um deles.