JavaScript Academy · Aula

O objeto de evento

Leia detalhes do evento, como destino e tipo.

O objeto de evento é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O argumento do evento

Quando um evento é acionado, o navegador passa um objeto de evento ao seu manipulador. Ele contém detalhes sobre o que aconteceu e quais elementos estão envolvidos.

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

event.type

event.type é o nome do evento, permitindo que um único manipulador reaja de formas diferentes a diferentes tipos de evento.

function handle(e) {
  console.log("Got a " + e.type + " event");
}

event.target

event.target é o elemento onde o evento realmente se originou, o elemento mais profundo com o qual houve interação.

list.addEventListener("click", (e) => {
  console.log(e.target); // the exact clicked element
});

event.currentTarget

event.currentTarget é o elemento cujo ouvinte está sendo executado no momento, aquele no qual você chamou addEventListener.

list.addEventListener("click", (e) => {
  console.log(e.currentTarget === list); // true
});

target e currentTarget

Quando os eventos se propagam, target pode ser um filho, enquanto currentTarget é o pai que está ouvindo. Essa distinção possibilita a delegação de eventos.

list.addEventListener("click", (e) => {
  // e.target = clicked <li>
  // e.currentTarget = the <ul>
});

Delegação de eventos

Associe um único ouvinte a um pai e use target.closest para descobrir em qual filho houve a ação. Essa abordagem escala melhor do que usar muitos ouvintes.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) console.log(item.dataset.id);
});

event.timeStamp

event.timeStamp registra quando o evento foi criado, sendo útil para medir durações entre eventos.

btn.addEventListener("click", (e) => {
  console.log(e.timeStamp);
});

Coordenadas em eventos do mouse

Os eventos do mouse acrescentam dados de posição, como clientX/clientY (em relação à área de visualização) e pageX/pageY (em relação ao documento).

area.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);
});

Teclas modificadoras

Propriedades como e.shiftKey, e.ctrlKey, e.altKey e e.metaKey informam quais teclas modificadoras estavam pressionadas.

btn.addEventListener("click", (e) => {
  if (e.shiftKey) console.log("Shift-click");
});

event.isTrusted

event.isTrusted é verdadeiro para eventos reais gerados pelo usuário e falso para eventos criados por um script, ajudando a distinguir uma entrada genuína.

btn.addEventListener("click", (e) => {
  console.log(e.isTrusted);
});

Lendo a tecla

Os eventos do teclado expõem e.key (o caractere ou nome da tecla), permitindo que você reaja a teclas específicas.

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") console.log("submit");
});

Verificação rápida

Diferencie os dois destinos.

Recapitulação

O objeto de evento descreve o evento: type, target (onde ele se originou) e currentTarget (onde está o ouvinte). A diferença entre eles possibilita a delegação de eventos. Os eventos também expõem coordenadas, teclas modificadoras, key, timeStamp e isTrusted.

Perguntas Frequentes

A aula “O objeto de evento” é grátis?

Sim — o texto completo de “O objeto de evento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “O objeto de evento”?

Leia detalhes do evento, como destino e tipo. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “O objeto de evento”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy