Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: Omgaan met Event-Propagatie en Delegatie | Eventafhandeling en Gebruikersinteracties in JavaScript
Geavanceerde JavaScript-Beheersing

bookUitdaging: Omgaan met Event-Propagatie en Delegatie

Taak

Je bouwt een dynamische lijst waarin gebruikers specifieke items kunnen toevoegen en verwijderen.

  1. Gebruik eventdelegatie door één enkele klikgebeurtenislistener toe te voegen aan de ul met ID dynamic-list;
  2. Wanneer een item wordt aangeklikt:
    • Als het aangeklikte element een <li> is, toon een alert met de tekst van het aangeklikte item;
    • Als het aangeklikte element een "Delete"-knop is, verwijder het bijbehorende <li>-item uit de lijst.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Gebruik event.target.tagName === 'LI' om te controleren of het aangeklikte element een <li> is;
  • Gebruik event.target.classList.contains('delete-btn') om te controleren of het aangeklikte element een "Delete"-knop is.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 5

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you show me the JavaScript code for handling the event delegation?

How do I add new items to the dynamic list?

Can you explain how the delete functionality works in more detail?

Awesome!

Completion rate improved to 2.22

bookUitdaging: Omgaan met Event-Propagatie en Delegatie

Veeg om het menu te tonen

Taak

Je bouwt een dynamische lijst waarin gebruikers specifieke items kunnen toevoegen en verwijderen.

  1. Gebruik eventdelegatie door één enkele klikgebeurtenislistener toe te voegen aan de ul met ID dynamic-list;
  2. Wanneer een item wordt aangeklikt:
    • Als het aangeklikte element een <li> is, toon een alert met de tekst van het aangeklikte item;
    • Als het aangeklikte element een "Delete"-knop is, verwijder het bijbehorende <li>-item uit de lijst.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Gebruik event.target.tagName === 'LI' om te controleren of het aangeklikte element een <li> is;
  • Gebruik event.target.classList.contains('delete-btn') om te controleren of het aangeklikte element een "Delete"-knop is.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 5
some-alt