Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement
Gérez les événements du DOM avec les types appropriés, créez des données d’événements CustomEvent et réduisez sûrement les sous-types de HTMLElement.
Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 3 leçons au total.
Introduction
Objectif : ajouter des écouteurs d’événements typés, affiner les éléments de manière sûre et émettre des CustomEvent avec des charges utiles.
- Types d’événements (MouseEvent, KeyboardEvent, InputEvent)
- Affiner target/currentTarget avec instanceof
- Charges utiles detail de CustomEvent
Écouteurs typés
Les signatures des écouteurs sont typées selon le nom de l’événement : click → MouseEvent, keydown → KeyboardEvent. Ajoutez des annotations explicites pour plus de clarté.
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 et currentTarget
target est la source d’origine et peut être de nombreux types ; currentTarget est l’élément qui reçoit l’événement. Affinez avec instanceof avant d’utiliser les API des éléments.
document.addEventListener("input", (ev: InputEvent) => {
const t = ev.target;
const c = ev.currentTarget; // here: Document
if (t instanceof HTMLInputElement) {
console.log("value=", t.value);
}
});Charge utile de CustomEvent
CustomEvent<T> transporte une charge utile detail typée. Émettez et gérez cet événement avec le même paramètre générique.
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);
});Affinement vers un sous-type
Utilisez instanceof pour affiner le type vers des classes d’éléments HTML précises (par exemple, HTMLButtonElement, 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);
}
});Délégation et garde
Délégation : écoutez à un niveau supérieur (document), puis recherchez un élément correspondant et affinez son type avant d’accéder à ses API.
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);
}
});Vérification de l’affinement
Vérification rapide : quelle est la manière la plus sûre d’accéder aux API propres à un élément dans un gestionnaire d’événements ?
Récapitulatif
Récapitulatif : les noms d’événements indiquent leurs types. Utilisez instanceof pour affiner target/currentTarget et transportez les données dans la propriété detail de CustomEvent<T>.
Apprends TypeScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 101
- Leçons
- 352
Questions Fréquemment Posées
La leçon « Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement » est-elle gratuite ?
Oui — le texte complet de « Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement » ?
Gérez les événements du DOM avec les types appropriés, créez des données d’événements CustomEvent et réduisez sûrement les sous-types de HTMLElement. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Types du DOM de lib et querySelector (vérifications strictes de null)
- Types d’événements, événements personnalisés ; réduction des sous-types HTMLElement
- Manipulation de FormData, URL et URLSearchParams