Mukautetut tapahtumat
Luokaa ja lähettäkää omia tapahtumianne.
Mukautetut tapahtumat on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Sisäänrakennettuja tapahtumia pidemmälle
DOM:n avulla voitte luoda ja lähettää omia tapahtumia CustomEvent-objektilla. Tämä vähentää sovelluksen osien välisiä riippuvuuksia: yksi komponentti ilmoittaa tapahtuneesta, ja muut kuuntelevat sitä ilman suoraa viittausta.
CustomEvent-tapahtuman luominen
Luokaa tapahtuma komennolla new CustomEvent(name, options). Nimi voi olla mikä tahansa valitsemanne merkkijono.
const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"Tapahtuman lähettäminen
Lähettäkää tapahtuma kohteessa komennolla dispatchEvent. Kaikki kohteeseen kyseisellä nimellä rekisteröidyt kuuntelijat suoritetaan. Niin käy myös yläelementin kuuntelijoille, jos tapahtuma kuplii.
element.dispatchEvent(new CustomEvent("cart:add"));Tapahtuman kuunteleminen
Kuunnelkaa tapahtumaa täsmälleen kuten natiivia tapahtumaa käyttämällä addEventListener-metodia ja omaa nimeänne.
element.addEventListener("cart:add", () => {
console.log("Something was added to the cart");
});Tietojen välittäminen detail-kentällä
Liittäkää hyötykuorma tapahtumaan detail-ominaisuuden avulla. Kuuntelijat lukevat sen arvosta event.detail.
const evt = new CustomEvent("cart:add", {
detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);Hyötykuorman lukeminen
Kuuntelijan sisällä event.detail sisältää kaiken välittämänne. Se voi olla mikä tahansa arvo: objekti, taulukko, merkkijono tai luku.
element.addEventListener("cart:add", (e) => {
console.log(e.detail.id, e.detail.qty); // 42 2
});Kuplinnan ottaminen käyttöön
Mukautetut tapahtumat eivät oletusarvoisesti kupli. Asettakaa bubbles: true, jotta yläelementit ja delegoidut kuuntelijat voivat vastaanottaa tapahtuman.
const evt = new CustomEvent("cart:add", {
bubbles: true,
detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listencancelable-asetus
Asettakaatable cancelable: true, jotta kuuntelijat voivat kutsua preventDefault()-metodia. Lähettäjä tarkistaa dispatchEvent-kutsun palautusarvosta, peruutettiinko tapahtuma.
const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();Riippuvuuksien vähentämisen malli
Mukautettujen tapahtumien avulla moduulit voivat viestiä ilman, että ne tuovat toisiaan riippuvuuksiksi. Lokitus- tai analytiikkakerros voi kuunnella sovelluksen laajuisia tapahtumia document-elementissä.
document.addEventListener("user:login", (e) => {
analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
new CustomEvent("user:login", { detail: { userId: 7 } })
);Nimeämiskäytännöt
Käyttäkää tapahtumien nimissä nimiavaruutta, esimerkiksi cart:add ja user:login, jotta vältätte törmäykset natiivien tapahtumien kanssa ja ryhmittelette toisiinsa liittyvät tapahtumat selkeästi.
Vanha ja uusi syntaksi
Vanhassa koodissa voi tulla vastaan perinteinen document.createEvent-rajapinta. Suosikaa nykyaikaista new CustomEvent(...)-konstruktoria; se on yksinkertaisempi ja ainoa muoto, jota nykyään kannattaa kirjoittaa.
const evt = new CustomEvent("ready", { detail: 1 });Pikatarkistus
Mukautettujen tapahtumien tietotesti.
Kertaus
Luokaa omia tapahtumia komennoilla new CustomEvent(name, { detail, bubbles, cancelable }) ja dispatchEvent. Lukekaa hyötykuorma arvosta event.detail, ottakaa kuplinta käyttöön delegointia varten ja käyttäkää cancelable-asetusta peruutettavissa toiminnoissa. Mukautetut tapahtumat vähentävät komponenttien välisiä riippuvuuksia ja muodostavat selkeän julkaisija–tilaaja-tyylin.
Opi JavaScript 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
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Mukautetut tapahtumat” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mukautetut tapahtumat”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mukautetut tapahtumat”?
Luokaa ja lähettäkää omia tapahtumianne. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Mukautetut tapahtumat”-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ä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript 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
- Capture- ja bubble-vaiheet
- Tapahtumadelegointimalli
- Dynaamiset listat delegoinnilla
- Mukautetut tapahtumat