JavaScript Academy · Oppitunti

Tapahtumaobjekti

Lukekaa tapahtuman tietoja, kuten target ja type.

Oppitunti 2/413 vaihetta

Tapahtumaobjekti on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Tapahtuma-argumentti

Kun tapahtuma käynnistyy, selain välittää käsittelijälle tapahtumaolion. Se sisältää tietoja siitä, mitä tapahtui ja mitkä elementit ovat mukana.

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

event.type

event.type on tapahtuman nimi, jonka avulla yksi käsittelijä voi reagoida eri tapahtumatyyppeihin eri tavoin.

function handle(e) {
  console.log("Got a " + e.type + " event");
}

event.target

event.target on elementti, josta tapahtuma todella sai alkunsa: syvimmällä oleva elementti, johon vaikutettiin.

list.addEventListener("click", (e) => {
  console.log(e.target); // the exact clicked element
});

event.currentTarget

event.currentTarget on elementti, jonka kuuntelijaa parhaillaan suoritetaan eli elementti, jolle kutsuitte addEventListener-menetelmää.

list.addEventListener("click", (e) => {
  console.log(e.currentTarget === list); // true
});

target ja currentTarget

Tapahtumien kupliessa target voi olla lapsielementti, kun taas currentTarget on kuunteleva yläelementti. Tämä ero mahdollistaa tapahtumien delegoinnin.

list.addEventListener("click", (e) => {
  // e.target = clicked <li>
  // e.currentTarget = the <ul>
});

Tapahtumien delegointi

Liittäkää yksi kuuntelija yläelementtiin ja selvittäkää target.closest-menetelmällä, mihin lapsielementtiin toiminto kohdistui. Tämä skaalautuu paremmin kuin useat kuuntelijat.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) console.log(item.dataset.id);
});

event.timeStamp

event.timeStamp tallentaa tapahtuman luontihetken, joten sen avulla voidaan mitata tapahtumien välistä kestoa.

btn.addEventListener("click", (e) => {
  console.log(e.timeStamp);
});

Hiiritapahtumien koordinaatit

Hiiritapahtumat sisältävät sijaintitietoja, kuten clientX/clientY (suhteessa näkymäalueeseen) ja pageX/pageY (suhteessa dokumenttiin).

area.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);
});

Muokkausnäppäimet

Ominaisuudet, kuten e.shiftKey, e.ctrlKey, e.altKey ja e.metaKey, kertovat, mitä muokkausnäppäimiä pidettiin painettuina.

btn.addEventListener("click", (e) => {
  if (e.shiftKey) console.log("Shift-click");
});

event.isTrusted

event.isTrusted on tosi oikeiden käyttäjätapahtumien yhteydessä ja epätosi komentosarjan luomien tapahtumien yhteydessä, joten sen avulla voidaan erottaa aito syöte.

btn.addEventListener("click", (e) => {
  console.log(e.isTrusted);
});

Näppäimen lukeminen

Näppäimistötapahtumat tarjoavat ominaisuuden e.key, joka sisältää merkin tai nimen, joten voitte reagoida tiettyihin näppäimiin.

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") console.log("submit");
});

Pikatarkistus

Erottakaa nämä kaksi kohdetta toisistaan.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Tapahtumaolio kuvaa tapahtumaa: type, target (mistä tapahtuma sai alkunsa) ja currentTarget (missä kuuntelija on). Niiden välinen ero mahdollistaa tapahtumien delegoinnin. Tapahtumat tarjoavat myös koordinaatit, muokkausnäppäimet sekä ominaisuudet key, timeStamp ja isTrusted.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tapahtumaobjekti” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tapahtumaobjekti”. 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 ”Tapahtumaobjekti”?

Lukekaa tapahtuman tietoja, kuten target ja type. 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 2/4.

Kuinka kauan ”Tapahtumaobjekti”-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

← Takaisin: JavaScript Academy