Skip to main content

JavaScript Custom Events — exercises and bug fixes

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

    Fire a custom event

    easy10 min

    Create and fire an event called itemAdded, then report it was heard.

  2. 2

    Send data with the event

    easy10 min

    Pass a name in detail and report it.

  3. 3

    Make it bubble

    easy10 min

    Fire the event on the inner div so the outer one hears it.

  4. 4

    Fire on document

    easy10 min

    Fire a themeChanged event on document and report the detail.

  5. 5

    Let two listeners respond

    medium10 min

    Attach two listeners to one custom event and report that both ran.

Find the bug(5)

  1. 1

    Fix the event never dispatched

    easy8 min

    Creating an event does not fire it.

  2. 2

    Fix the data put on the wrong property

    easy8 min

    Data travels in detail, not in a property of your own.

  3. 3

    Fix the missing bubbles option

    easy8 min

    A custom event does not bubble unless it is told to.

  4. 4

    Fix the event fired on the wrong element

    easy8 min

    The listener is on the cart, so the event must be fired there.

  5. 5

    Fix Event used where detail is needed

    easy8 min

    A plain Event cannot carry a detail property.

Ready to write the code?

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

Open the workspace