Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen
Behandeln Sie DOM-Events mit den richtigen Typen, erstellen Sie CustomEvent-Payloads und grenzen Sie HTMLElement-Untertypen sicher ein.
Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Einführung
Ziel: Fügen Sie typisierte Event-Listener hinzu, grenzen Sie Elemente sicher ein und lösen Sie CustomEvent mit Nutzdaten aus.
- Ereignistypen (MouseEvent, KeyboardEvent, InputEvent)
- target/currentTarget mit instanceof eingrenzen
- detail-Nutzdaten von CustomEvent
Typisierte Listener
Listener-Signaturen werden durch den Ereignisnamen typisiert: click → MouseEvent, keydown → KeyboardEvent. Fügen Sie zur Klarheit explizite Typannotationen hinzu.
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 und currentTarget
target ist die ursprüngliche Quelle und kann viele Typen haben; currentTarget ist das Element, auf dem der Listener registriert ist. Grenzen Sie mit instanceof ein, bevor Sie Element-APIs verwenden.
document.addEventListener("input", (ev: InputEvent) => {
const t = ev.target;
const c = ev.currentTarget; // here: Document
if (t instanceof HTMLInputElement) {
console.log("value=", t.value);
}
});CustomEvent-Nutzdaten
CustomEvent<T> transportiert typisierte detail-Nutzdaten. Lösen Sie es aus und verarbeiten Sie es mit demselben generischen Parameter.
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);
});Eingrenzung auf einen Untertyp
Verwenden Sie instanceof, um auf spezifische HTML-Elementklassen (z. B. HTMLButtonElement, HTMLAnchorElement) einzugrenzen.
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);
}
});Delegation und Prüfung
Ereignisdelegation: Hören Sie weiter oben (document) zu, suchen Sie dann ein passendes Element und grenzen Sie es ein, bevor Sie auf APIs zugreifen.
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);
}
});Prüfung zur Eingrenzung
Schnellprüfung: Wie greifen Sie in einem Event-Handler am sichersten auf elementspezifische APIs zu?
Zusammenfassung
Zusammenfassung: Ereignisnamen geben Ereignistypen vor. Grenzen Sie target/currentTarget mit instanceof ein und transportieren Sie Daten in den detail-Nutzdaten von CustomEvent<T>.
Häufig gestellte Fragen
Ist die Lektion „Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen“ kostenlos?
Ja — der vollständige Text von „Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen“?
Behandeln Sie DOM-Events mit den richtigen Typen, erstellen Sie CustomEvent-Payloads und grenzen Sie HTMLElement-Untertypen sicher ein. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- lib-DOM-Typen und querySelector (strikte Nullprüfungen)
- Event-Typen, benutzerdefinierte Events; Eingrenzung von HTMLElement-Untertypen
- Arbeiten mit FormData, URL und URLSearchParams