Browser events: Creating custom events

We saw how to react to DOM events.

I want to add a line about writing your own custom events.

You can use the Event object which is provided by the browser, to create a new event, in this case the event named “start”:

const anEvent = new Event('start');

Once you have the event, you can trigger the event using

document.dispatchEvent(anEvent)

and when this happens, any event listener listening on that event “name” is triggered:

document.addEventListener('start', (event) => {     
  console.log('started!')
})

Lessons in this unit:

0: Introduction
1: Handling events
2: The `DOMContentLoaded` event
3: The `event` object
4: Mouse events
5: Keyboard events
6: `preventDefault()`
7: Stopping event propagation
8: Bubbling and capturing
9: Form submit event
10: Input fields events
11: ▶︎ Creating custom events
Want to learn more? Check out our courses