Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Forklaring af Event-Propagation og Delegation | Håndtering af Hændelser og Brugerinteraktioner i JavaScript
Avanceret JavaScript-Mestring

bookForklaring af Event-Propagation og Delegation

Begivenhedspropagering

Begivenhedspropagering beskriver, hvordan en begivenhed bevæger sig gennem DOM'en efter at være blevet udløst, og den har tre forskellige faser: Fangst, Mål og Boble faser.

Fangstfase (Capture)

Begivenheden starter ved roden af DOM-træet (window) og bevæger sig ned mod målelementet. Eventlyttere i denne fase opfanger begivenheden, mens den bevæger sig nedad.

Målfase

Begivenheden når målelementet (det element, der udløste begivenheden). Det er her, eventlyttere, der er tilknyttet selve målelementet, udføres.

Boblefase (Bubble)

Efter at have nået målelementet begynder begivenheden at bevæge sig opad i DOM-træet til roden (window), bobler gennem overordnede elementer. Dette er den mest anvendte fase, som gør det muligt for overordnede elementer at reagere på begivenheder udløst af underordnede elementer.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Begivenheden forplanter sig gennem DOM'en, når button klikkes. Først udløses begivenheden på button (mål-fase), derefter bobler den op til den indre div og til sidst til den ydre div (boblingsfase).

Begivenhedsdelegering

Begivenhedsdelegering er en teknik, der udnytter begivenhedsforplantning til at håndtere begivenheder fra underordnede elementer ved hjælp af én enkelt begivenhedslytter på et overordnet element. I stedet for at tilføje individuelle lyttere til hvert underordnet element, lytter et overordnet element efter begivenheder, der bobler op fra dets underordnede elementer. Denne tilgang har to hovedfordele:

  1. Ydelse: Reduktion af antallet af begivenhedslyttere forbedrer ydelsen, især i situationer hvor elementer oprettes dynamisk (f.eks. en liste, der vokser, når nye elementer tilføjes);
  2. Vedligeholdelse: Begivenhedsdelegering forenkler koden, især når der arbejdes med store DOM-strukturer eller dynamisk indhold.
index.html

index.html

index.css

index.css

index.js

index.js

copy

I stedet for at tilføje klik-lyttere til hvert enkelt button-element, tilføjes en enkelt lytter til div-forældrelementet. Begivenheden bobler op fra button-elementerne til div, hvor den håndteres.

Dårlig tilgang

God tilgang

Praktisk eksempel: Håndtering af dynamisk liste

Event delegation er ideel til at håndtere interaktioner i lister eller tabeller, der kan vokse over tid (f.eks. tilføjelse af opgaver til en to-do-liste eller produkter til en indkøbskurv). Når elementer tilføjes eller fjernes, håndterer den overordnede container (som ul eller table) alle interaktioner, hvilket sparer behovet for at tilføje eller fjerne lyttere til hvert enkelte underordnede element.

index.html

index.html

index.css

index.css

index.js

index.js

copy

1. Hvad er event propagation?

2. I hvilken fase bevæger en begivenhed sig op ad DOM-træet efter at have nået sit målelement?

3. Hvorfor er begivenhedsdelegering nyttig, især med dynamisk indhold?

question mark

Hvad er event propagation?

Select the correct answer

question mark

I hvilken fase bevæger en begivenhed sig op ad DOM-træet efter at have nået sit målelement?

Select the correct answer

question mark

Hvorfor er begivenhedsdelegering nyttig, især med dynamisk indhold?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain the difference between capturing and bubbling phases in more detail?

How does event delegation work with dynamically added elements?

Can you provide a code example of event delegation in JavaScript?

Awesome!

Completion rate improved to 2.22

bookForklaring af Event-Propagation og Delegation

Stryg for at vise menuen

Begivenhedspropagering

Begivenhedspropagering beskriver, hvordan en begivenhed bevæger sig gennem DOM'en efter at være blevet udløst, og den har tre forskellige faser: Fangst, Mål og Boble faser.

Fangstfase (Capture)

Begivenheden starter ved roden af DOM-træet (window) og bevæger sig ned mod målelementet. Eventlyttere i denne fase opfanger begivenheden, mens den bevæger sig nedad.

Målfase

Begivenheden når målelementet (det element, der udløste begivenheden). Det er her, eventlyttere, der er tilknyttet selve målelementet, udføres.

Boblefase (Bubble)

Efter at have nået målelementet begynder begivenheden at bevæge sig opad i DOM-træet til roden (window), bobler gennem overordnede elementer. Dette er den mest anvendte fase, som gør det muligt for overordnede elementer at reagere på begivenheder udløst af underordnede elementer.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Begivenheden forplanter sig gennem DOM'en, når button klikkes. Først udløses begivenheden på button (mål-fase), derefter bobler den op til den indre div og til sidst til den ydre div (boblingsfase).

Begivenhedsdelegering

Begivenhedsdelegering er en teknik, der udnytter begivenhedsforplantning til at håndtere begivenheder fra underordnede elementer ved hjælp af én enkelt begivenhedslytter på et overordnet element. I stedet for at tilføje individuelle lyttere til hvert underordnet element, lytter et overordnet element efter begivenheder, der bobler op fra dets underordnede elementer. Denne tilgang har to hovedfordele:

  1. Ydelse: Reduktion af antallet af begivenhedslyttere forbedrer ydelsen, især i situationer hvor elementer oprettes dynamisk (f.eks. en liste, der vokser, når nye elementer tilføjes);
  2. Vedligeholdelse: Begivenhedsdelegering forenkler koden, især når der arbejdes med store DOM-strukturer eller dynamisk indhold.
index.html

index.html

index.css

index.css

index.js

index.js

copy

I stedet for at tilføje klik-lyttere til hvert enkelt button-element, tilføjes en enkelt lytter til div-forældrelementet. Begivenheden bobler op fra button-elementerne til div, hvor den håndteres.

Dårlig tilgang

God tilgang

Praktisk eksempel: Håndtering af dynamisk liste

Event delegation er ideel til at håndtere interaktioner i lister eller tabeller, der kan vokse over tid (f.eks. tilføjelse af opgaver til en to-do-liste eller produkter til en indkøbskurv). Når elementer tilføjes eller fjernes, håndterer den overordnede container (som ul eller table) alle interaktioner, hvilket sparer behovet for at tilføje eller fjerne lyttere til hvert enkelte underordnede element.

index.html

index.html

index.css

index.css

index.js

index.js

copy

1. Hvad er event propagation?

2. I hvilken fase bevæger en begivenhed sig op ad DOM-træet efter at have nået sit målelement?

3. Hvorfor er begivenhedsdelegering nyttig, især med dynamisk indhold?

question mark

Hvad er event propagation?

Select the correct answer

question mark

I hvilken fase bevæger en begivenhed sig op ad DOM-træet efter at have nået sit målelement?

Select the correct answer

question mark

Hvorfor er begivenhedsdelegering nyttig, især med dynamisk indhold?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 4
some-alt