JavaScript Academy · leksjon

Mønsteret hendelsesdelegering

Håndter mange hendelser fra barn med én lytter på forelderen.

Leksjon 2 av 413 trinn

Mønsteret hendelsesdelegering er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Én lytter for alle

Event-delegering betyr at én lytter legges til på et felles overordnet element i stedet for at mange lyttere legges til på hvert enkelt underordnet element. Fordi hendelser bobler, mottar det overordnede elementet klikk fra alle sine underordnede elementer.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Den naive tilnærmingen

Uten event-delegering måtte De gått gjennom hvert element og lagt til en handler. Det er lite effektivt: Det krever mer minne, og fungerer ikke for elementer som legges til senere.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

Den delegerte tilnærmingen

Legg i stedet én lytter til det overordnede elementet, og undersøk event.target for å finne ut hvilket underordnet element som ble klikket.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Finne riktig mål

Klikket kan treffe et nestet element. Bruk event.target.closest(selector) for å gå oppover og finne det relevante overordnede elementet som samsvarer med selektoren.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Sikre med en sjekk

Sikre alltid koden mot klikk som ikke samsvarer. Den tidlige avslutningen if (!item) return; hindrer handleren i å krasje når brukeren klikker på utfylling eller et mellomrom inne i beholderen.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Bruke data-attributter

Et vanlig mønster er å lagre en id eller handling på hvert element ved hjelp av et data-*-attributt. Den delegerte handleren leser verdien fra det samsvarende elementet.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Sende videre basert på handling

For verktøylinjer med mange knapper kan De gi hver knapp en data-action og bruke en switch på verdien. Én lytter håndterer alle knappene.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Hvorfor det skalerer

Med event-delegering trenger en liste med 1000 rader bare én lytter i stedet for 1000. Det gir mindre minnebruk, raskere oppsett og ingen oppryddingssløyfe når radene endres.

Ytelsesmerknad

Event-delegering har riktignok en liten kostnad: Hver samsvarende hendelse kjører handleren, som deretter filtrerer den. For de fleste apper er dette ubetydelig sammenlignet med besparelsene, men unngå å legge delegerte lyttere på document for svært hyppige hendelser som mousemove.

Velge beholderen

Velg det nærmeste stabile overordnede elementet som inneholder alle målene. Delegering til en avgrenset beholder (selve listen) er bedre enn delegering til document, fordi færre uvedkommende hendelser utløser handleren.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Kombinere med closest

closest() er kjernen i event-delegering. Metoden returnerer selve elementet hvis det samsvarer, det nærmeste samsvarende overordnede elementet eller null. Dette gjør det trygt å bruke delegering med nestet markup.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Hurtigsjekk

Hvorfor brukes event-delegering?

Besvar den i den interaktive leksjonen

Oppsummering

Event-delegering legger én lytter til et overordnet element og bruker bubbling til å håndtere alle underordnede elementer. Bruk e.target.closest(selector) for å finne det relevante elementet, sikre med en tidlig retur og lese data-*-attributter for å sende handlinger videre. Mønsteret skalerer til enorme lister og er standardmønsteret for dynamiske brukergrensesnitt.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mønsteret hendelsesdelegering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Mønsteret hendelsesdelegering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Mønsteret hendelsesdelegering»?

Håndter mange hendelser fra barn med én lytter på forelderen. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Mønsteret hendelsesdelegering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy