0Pricing
TypeScript Academy · Aula

Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement

Trate eventos DOM com os tipos corretos, crie cargas úteis de CustomEvent e reduza subtipos de HTMLElement com segurança.

Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 3. 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 3 aulas no total.

Introdução

Objetivo: adicionar ouvintes de eventos tipados, restringir elementos com segurança e emitir CustomEvent com cargas úteis.

  • Tipos de eventos (MouseEvent, KeyboardEvent, InputEvent)
  • Restrinja target/currentTarget com instanceof
  • Cargas úteis de detail em CustomEvent

Ouvintes tipados

As assinaturas dos ouvintes são tipadas pelo nome do evento: click → MouseEvent, keydown → KeyboardEvent. Adicione anotações explícitas para maior clareza.

const btn = document.querySelector("#btn");
if (btn) {
  btn.addEventListener("click", (ev: MouseEvent) => {
    console.log("x=", ev.clientX, "y=", ev.clientY);
  });
}

window.addEventListener("keydown", (ev: KeyboardEvent) => {
  console.log("key=", ev.key);
});

target versus currentTarget

target é a fonte original e pode ter vários tipos; currentTarget é o receptor do ouvinte. Restrinja o tipo com instanceof antes de usar APIs de elementos.

document.addEventListener("input", (ev: InputEvent) => {
  const t = ev.target;
  const c = ev.currentTarget; // here: Document
  if (t instanceof HTMLInputElement) {
    console.log("value=", t.value);
  }
});

Carga útil de CustomEvent

CustomEvent<T> transporta uma carga útil detail tipada. Emita e trate o evento com o mesmo parâmetro genérico.

type CounterDetail = { delta: number };

const inc = new CustomEvent<CounterDetail>("counter:change", {
  detail: { delta: 1 }
});

document.dispatchEvent(inc);

document.addEventListener("counter:change", (ev: CustomEvent<CounterDetail>) => {
  console.log("delta=", ev.detail.delta);
});

Restrição para subtipo

Use instanceof para restringir o tipo a classes específicas de elementos HTML, como HTMLButtonElement e HTMLAnchorElement.

document.addEventListener("click", (ev: MouseEvent) => {
  const el = ev.target;
  if (el instanceof HTMLButtonElement) {
    el.disabled = true; // safe: HTMLButtonElement API
  } else if (el instanceof HTMLAnchorElement) {
    console.log("href=", el.href);
  }
});

Delegação + guarda

Delegação: ouça em um nível mais alto, como document, encontre um elemento correspondente e restrinja seu tipo antes de acessar as APIs.

document.addEventListener("click", (ev: MouseEvent) => {
  const el = ev.target as Element | null;
  if (!el) return;
  const btn = el.closest("button.btn-primary");
  if (btn instanceof HTMLButtonElement) {
    console.log("delegated click on:", btn.textContent);
  }
});

Verificação da restrição de tipos

Verificação rápida: qual é a maneira mais segura de acessar APIs específicas de elementos em um manipulador de eventos?

Recapitulação

Recapitulação: os nomes dos eventos indicam seus tipos. Use instanceof para restringir target/currentTarget e transporte dados na propriedade detail de CustomEvent<T>.

Perguntas Frequentes

A aula “Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement” é grátis?

Sim — o texto completo de “Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement” é 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 TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 3 aulas no total.

O que vou aprender em “Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement”?

Trate eventos DOM com os tipos corretos, crie cargas úteis de CustomEvent e reduza subtipos de HTMLElement com segurança. Você pratica TypeScript 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 TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript 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 3.

Quanto tempo leva a aula “Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement”?

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 TypeScript Academy?

Sim. Cada aula de TypeScript 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

  1. Tipos DOM de lib e querySelector (verificações estritas de nulo)
  2. Tipos de eventos, eventos personalizados; redução de subtipos de HTMLElement
  3. Trabalhando com FormData, URL, URLSearchParams
← Voltar para TypeScript Academy