Skip to main content

JavaScript Event Delegation — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript Event Delegation lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Delegate to a list

    easy10 min

    Put one listener on the list and report the text of the item clicked.

  2. 2

    Ignore clicks on the container

    easy10 min

    Report nothing selected when the list itself is clicked.

  3. 3

    Use closest for nested content

    easy10 min

    The click lands on a span, so walk up to the item and report its class.

  4. 4

    Handle new elements

    easy10 min

    Add an item after attaching the listener and make it work when clicked.

  5. 5

    Decide by data attribute

    medium10 min

    Report which action the clicked button carries.

Find the bug(5)

  1. 1

    Fix the listener on each item

    easy8 min

    One listener on the list handles every item, including new ones.

  2. 2

    Fix currentTarget used to find the item

    easy8 min

    currentTarget is the list, not the item that was clicked.

  3. 3

    Fix the missing target check

    easy8 min

    A click on the list itself should not be treated as an item.

  4. 4

    Fix target used where closest is needed

    easy8 min

    The click lands on the span, so the item must be found by walking up.

  5. 5

    Fix the delete removing the wrong element

    easy8 min

    The row should go, not just the button inside it.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace