Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen
Käsitelkää DOM-tapahtumia oikeilla tyypeillä, luokaa CustomEvent-tapahtumien sisältöjä ja tarkentakaa HTMLElement-alatyyppejä turvallisesti.
Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 3 oppituntia.
Johdanto
Tavoite: Lisätkää tyypitettyjä tapahtumankuuntelijoita, rajatkaa elementtien tyypit turvallisesti ja lähettäkää hyötykuormia sisältäviä CustomEvent-tapahtumia.
- Tapahtumatyypit (MouseEvent, KeyboardEvent, InputEvent)
- Rajaa target/currentTarget instanceof-operaattorilla
- CustomEvent detail -hyötykuormat
Tyypitetyt kuuntelijat
Kuuntelijoiden allekirjoitukset tyypitetään tapahtuman nimen perusteella: click → MouseEvent, keydown → KeyboardEvent. Lisätkää selkeyden vuoksi eksplisiittiset tyyppimerkinnät.
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 ja currentTarget
target on alkuperäinen lähde ja voi olla monen tyyppinen; currentTarget on kuuntelijan vastaanottaja. Rajatkaa tyyppiä instanceof-operaattorilla ennen elementtien APIen käyttämistä.
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-hyötykuorma
CustomEvent<T> sisältää tyypitetyn detail-hyötykuorman. Lähettäkää ja käsitelkää tapahtuma samaa geneeristä tyyppiparametria käyttäen.
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);
});Alityypin rajaus
Käyttäkää instanceof-operaattoria rajataksenne tyypin tiettyihin HTML-elementtiluokkiin (esimerkiksi HTMLButtonElement ja 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);
}
});Delegointi ja tarkistus
Delegointi: Kuunnelkaa tapahtumia ylemmällä tasolla (document), etsikää vastaava elementti ja rajatkaa sen tyyppi ennen APIen käyttämistä.
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);
}
});Rajauksen tarkistus
Pikatarkistus: Mikä on turvallisin tapa käyttää elementtikohtaisia API:eja tapahtumankäsittelijässä?
Kertaus
Kertaus: Tapahtumien nimet ilmaisevat tapahtumatyypit. Rajatkaa target/currentTarget-tyyppiä instanceof-operaattorilla ja välittäkää tiedot CustomEvent<T>-tapahtuman detail-kentässä.
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 101
- Oppitunnit
- 352
Usein kysytyt kysymykset
Onko oppitunti ”Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen” ilmainen?
Kyllä – oppitunnin ”Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen”?
Käsitelkää DOM-tapahtumia oikeilla tyypeillä, luokaa CustomEvent-tapahtumien sisältöjä ja tarkentakaa HTMLElement-alatyyppejä turvallisesti. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.
Kuinka kauan ”Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?
Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)
- Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen
- FormDatan, URL:n ja URLSearchParamsin käyttö