O objeto Event: informações sobre o que aconteceu

Entenda como acessar detalhes sobre o evento que foi disparado, como qual tecla foi pressionada.

Você já aprendeu a “ouvir” eventos com addEventListener.
Agora vamos entender um detalhe poderoso: o objeto Event.

Ideia principal

Quando um evento acontece (clique, tecla, envio de formulário), o navegador entrega um “pacotinho de informações” para sua função.

Esse pacotinho é o objeto Event (muitas vezes chamado de e).

Analogia simples

Pense no evento como uma entrega de encomenda.
A ação aconteceu (alguém clicou), e junto vem uma etiqueta com detalhes:

  • onde aconteceu
  • qual tipo de ação foi
  • em que elemento
  • qual tecla foi pressionada (se for teclado)
  • posição do mouse (em alguns eventos)

Essa etiqueta é o Event.

Exemplo básico

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

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

Aqui, e é o objeto do evento.

Propriedades mais úteis do Event

e.type

Mostra o tipo do evento.

botao.addEventListener("click", function (e) {
  console.log(e.type); // click
});

e.target

Mostra o elemento onde o evento aconteceu.

document.addEventListener("click", function (e) {
  console.log(e.target);
});

Perfeito para saber “quem foi clicado”.

e.currentTarget

Mostra o elemento que está ouvindo o evento no momento.

botao.addEventListener("click", function (e) {
  console.log(e.currentTarget); // o próprio botao
});

Exemplos com teclado

e.key

Mostra qual tecla foi pressionada.

document.addEventListener("keydown", function (e) {
  console.log("Tecla:", e.key);
});

Se a pessoa apertar Enter, pode aparecer "Enter".

Exemplos com mouse

e.clientX e e.clientY

Mostram posição do ponteiro na tela (área visível da janela).

document.addEventListener("click", function (e) {
  console.log("X:", e.clientX, "Y:", e.clientY);
});

preventDefault() (visão rápida)

O objeto Event também traz métodos úteis.
Um dos mais usados é e.preventDefault(), que impede o comportamento padrão do navegador em alguns casos (como envio de formulário).
Você verá isso com mais profundidade na próxima lição.

Exemplo prático completo

<input id="campo" type="text" placeholder="Digite algo">
<p id="saida"></p>

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

campo.addEventListener("keydown", function (e) {
  saida.textContent = "Tecla pressionada: " + e.key;
});

Resumo da lição

  • O Event é o objeto com detalhes da ação que ocorreu.
  • Ele é recebido como parâmetro da função do listener (e).
  • Propriedades muito comuns:
    • type
    • target
    • currentTarget
    • key (teclado)
    • clientX/clientY (mouse)
  • Entender Event te dá controle real sobre interações da página.