JavaScript Academy · Oppitunti

addEventListenerin perusteet

Liittäkää tapahtumakäsittelijöitä elementteihin.

Oppitunti 1/413 vaihetta

addEventListenerin perusteet on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Tapahtumiin reagoiminen

Tapahtumien avulla koodi voi reagoida käyttäjän toimintoihin, kuten napsautuksiin, näppäinpainalluksiin ja lomakkeiden lähettämiseen. addEventListener on vakiotapa tapahtumien kuuntelemiseen.

Perussyntaksi

Kutsukaa addEventListener-menetelmää tapahtuman nimellä ja käsittelijäfunktiolla. Käsittelijä suoritetaan aina tapahtuman tapahtuessa.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Nimetyt käsittelijät

Voitte välittää nimetyn funktion. Tämä pitää koodin järjestyksessä ja ennen kaikkea mahdollistaa kuuntelijan poistamisen myöhemmin.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Useita kuuntelijoita

Toisin kuin vanhan onclick-ominaisuuden kanssa, voitte liittää samaan tapahtumaan useita kuuntelijoita ilman, että ne korvaavat toisensa.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Lopettakaa kuuntelu kutsumalla removeEventListener-menetelmää käyttäen samaa tapahtuman nimeä ja funktioviitettä, joita käytitte kuuntelijan lisäämiseen.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Nimettömiä funktioita ei voi poistaa

Rivinsisäinen nuolifunktio luo joka kerta uuden viitteen, joten sitä ei voi poistaa myöhemmin. Käyttäkää nimettyä viitettä, jos kuuntelija täytyy voida poistaa.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

once-asetus

Kun välitätte arvon { once: true }, kuuntelija poistetaan automaattisesti sen suorittamisen jälkeen.

btn.addEventListener("click", init, { once: true });

capture-asetus

Oletusarvoisesti kuuntelijat suoritetaan kuplintavaiheessa. { capture: true } saa ne suorittamaan käsittelyn sen sijaan sieppausvaiheessa.

parent.addEventListener("click", handler, { capture: true });

passive-asetus

{ passive: true } lupaa, ettette kutsu preventDefault-menetelmää, joten selain voi optimoida vierityksen suorituskykyä.

window.addEventListener("scroll", onScroll, { passive: true });

signal-asetus

AbortController-signaalin avulla voitte poistaa kuuntelijan (tai useita kuuntelijoita) keskeyttämällä toiminnon, mikä helpottaa siivousta.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this käsittelijöissä

Tavallisessa funktiokäsittelijässä this viittaa elementtiin, johon kuuntelija on liitetty. Nuolifunktiot eivät sido this-arvoa uudelleen.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Pikatarkistus

Testatkaa poistamista koskevat säännöt.

Vastaa interaktiivisessa oppitunnissa

Kertaus

addEventListener(type, handler, options) tilaa tapahtumia ja tukee useita kuuntelijoita. Poistakaa kuuntelijat removeEventListener-menetelmällä käyttäen samaa viitettä, joten suosikaa nimettyjä funktioita. Hyödyllisiä asetuksia ovat once, capture, passive ja signal. Tavallisissa käsittelijöissä this viittaa kohde-elementtiin.

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 ”addEventListenerin perusteet” ilmainen?

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

Liittäkää tapahtumakäsittelijöitä elementteihin. 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 1/4.

Kuinka kauan ”addEventListenerin perusteet”-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