Skip to main content

JavaScript Event Bubbling — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript Event Bubbling 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

    See a click bubble

    easy10 min

    Listen on the box and report when a click on the button reaches it.

  2. 2

    Record the bubbling order

    easy10 min

    Report the order the three handlers run in.

  3. 3

    Stop the bubble

    easy10 min

    Stop the click reaching the box and report only inner.

  4. 4

    Listen while capturing

    easy10 min

    Use capturing so the outer handler runs before the inner one.

  5. 5

    Show target does not change

    medium10 min

    Listen on the box and report the id of target and currentTarget.

Find the bug(5)

  1. 1

    Fix the order recorded backwards

    easy8 min

    Bubbling runs the innermost handler first.

  2. 2

    Fix preventDefault used to stop bubbling

    easy8 min

    preventDefault cancels the browser action, not the travel.

  3. 3

    Fix the missing capturing flag

    easy8 min

    Without true the outer handler runs after the inner one.

  4. 4

    Fix currentTarget used as the clicked element

    easy8 min

    target is where the click started, however far it travels.

  5. 5

    Fix the non-bubbling focus event

    easy8 min

    focus does not bubble, so focusin is needed on the parent.

Ready to write the code?

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

Open the workspace