Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser
Håndter DOM-hendelser med korrekte typer, opprett CustomEvent-nyttelaster, og snevre trygt inn HTMLElement-underklasser.
Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 3 leksjoner.
Introduksjon
Mål: Legge til typede hendelseslyttere, avgrense elementer trygt og sende ut CustomEvent med nyttelast.
- Hendelsestyper (MouseEvent, KeyboardEvent, InputEvent)
- Avgrens target/currentTarget med instanceof
- CustomEvent-detail med nyttelast
Typede lyttere
Signaturene til lyttere typesettes av hendelsesnavnet: click → MouseEvent, keydown → KeyboardEvent. Legg til eksplisitte typeannotasjoner for tydelighet.
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 kontra currentTarget
target er den opprinnelige kilden og kan ha mange typer. currentTarget er mottakeren til lytteren. Avgrens typen med instanceof før De bruker element-API-er.
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-nyttelast
CustomEvent<T> inneholder en typet detail-nyttelast. Send ut og håndter den med samme generiske 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);
});Avgrensing til undertype
Bruk instanceof for å avgrense til bestemte HTML-elementklasser (for eksempel HTMLButtonElement og 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);
}
});Delegering og vakt
Delegering: Lytt høyt i hierarkiet (på document), finn deretter et element som samsvarer, og avgrens typen før du bruker API-er.
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);
}
});Kontroll av typeavgrensing
Rask kontroll: Hva er den tryggeste måten å få tilgang til elementspesifikke API-er i en hendelseshåndterer?
Oppsummering
Oppsummering: Hendelsesnavn angir hendelsestyper. Bruk instanceof for å avgrense target/currentTarget, og legg data i detail i CustomEvent<T>.
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 101
- Leksjoner
- 352
Ofte stilte spørsmål
Er leksjonen «Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser» gratis?
Ja – hele teksten i «Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser»?
Håndter DOM-hendelser med korrekte typer, opprett CustomEvent-nyttelaster, og snevre trygt inn HTMLElement-underklasser. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med TypeScript Academy?
Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?
Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- lib DOM-typer og querySelector (strenge null-kontroller)
- Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser
- Arbeid med FormData, URL og URLSearchParams