JavaScript Academy · Oppitunti

Dynaamiset listat delegoinnilla

Hallinnoikaa suoritusaikana lisättyjen elementtien tapahtumia.

Oppitunti 3/413 vaihetta

Dynaamiset listat delegoinnilla on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Dynaamisten elementtien ongelma

Kun kuuntelijat liitetään suoraan elementteihin, DOM:iin asetuksen jälkeen lisätyillä elementeillä ei ole kuuntelijaa. Delegointi ratkaisee tämän, koska yläelementin kuuntelija vastaanottaa myös myöhemmin lisättyjen alielementtien tapahtumat.

Suorat kuuntelijat eivät toimi

Tässä kuuntelija lisätään olemassa oleviin kohteisiin. Uusi lisätty kohde ei saa mitään käsittelijää eikä reagoi mihinkään.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

Delegointi toimii automaattisesti

Kun yläelementtiin on liitetty delegoitu kuuntelija, uusi kohde käsitellään automaattisesti. Kuuntelijoita ei tarvitse liittää uudelleen jokaisen lisäyksen jälkeen.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

Kohteiden lisääminen

Luokaa uudet elementit ja liittäkää ne DOM:iin. Koska yläelementti käyttää jo delegointia, kohteet ovat vuorovaikutteisia heti ilmestyessään.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

Kohteiden poistaminen

Poistaminenkin on yksinkertaista. Delegoitu käsittelijä voi tunnistaa rivin sisällä olevan poistopainikkeen ja poistaa rivin.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

Alitoimintojen erottaminen

Rivillä voi olla useita vuorovaikutteisia osia. Käyttäkää matches()- tai closest()-metodia selvittääksenne, mitä niistä napsautettiin, ja haarautukaa sen perusteella.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

Tietojen perusteella renderöiminen

Yleinen toimintatapa on säilyttää tila taulukossa, renderöidä rivit sen perusteella ja delegoida napsautukset. Uudelleenrenderöinti korvaa alielementit, mutta ainoa yläelementin kuuntelija säilyy muuttumattomana.

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

Ei siivousongelmia

Elementtikohtaisia kuuntelijoita käytettäessä on muistettava kutsua removeEventListener ennen solmujen poistamista muistivuotojen välttämiseksi. Delegointi poistaa tämän huolen: alielementin poistaminen ei jätä yhtään kuuntelijaa irralliseksi.

Luokkien tilan vaihtaminen

Delegointi sopii hyvin yhteen valintatilojen luokkien tilan vaihtamisen kanssa. Käsittelijä löytää rivin ja vaihtaa luokan tilan.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

Pysyvän tunnisteen lukeminen

Koska DOM-solmut korvataan uudelleenrenderöinnin yhteydessä, älkää koskaan tallentako viittauksia niihin. Tallentakaa pysyvä tunniste data-id-attribuuttiin ja etsikää tietomallista kyseinen tunniste käsittelijän sisällä.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

Myös input-tapahtumat

Delegointi ei rajoitu napsautuksiin. Voitte delegoida samalla tavalla input- tai change-tapahtumat dynaamisesti lisätyille lomakekentille.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

Pikatarkistus

Dynaamiset luettelot ja delegointi.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Delegointi on erityisen hyödyllistä dynaamisissa luetteloissa: yksi yläelementin kuuntelija käsittelee nykyiset ja tulevat alielementit, säilyy uudelleenrenderöinnin jälkeen eikä vaadi solmukohtaista siivousta. Käyttäkää matches()- ja closest()-metodeja alitoimintojen erottamiseen ja tallentakaa pysyvät tunnisteet data-*-attribuutteihin, jotta käsittelijät löytävät tietomallinne.

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 ”Dynaamiset listat delegoinnilla” ilmainen?

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

Hallinnoikaa suoritusaikana lisättyjen elementtien tapahtumia. 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 3/4.

Kuinka kauan ”Dynaamiset listat delegoinnilla”-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