Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Challenge: Handle Event Propagation and Delegation | Event Handling and User Interactions in JavaScript
Advanced JavaScript Mastery
course content

Cursusinhoud

Advanced JavaScript Mastery

Advanced JavaScript Mastery

3. Event Handling and User Interactions in JavaScript
4. Asynchronous JavaScript and API Integration

book
Challenge: Handle Event Propagation and Delegation

Task

You're building a dynamic list where users can add and delete specific items.

  1. Use event delegation by adding a single click event listener to the ul with ID dynamic-list;
  2. When an item is clicked:
    • If the clicked element is an <li>, show an alert with the text of the clicked item;
    • If the clicked element is a "Delete" button, remove the corresponding <li> item from the list.
html

index.html

css

index.css

js

index.js

copy
  • Use event.target.tagName === 'LI' to check if the clicked element is an <li>;
  • Use event.target.classList.contains('delete-btn') to check if the clicked element is a "Delete" button.
html

index.html

css

index.css

js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 5
Onze excuses dat er iets mis is gegaan. Wat is er gebeurd?
some-alt