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 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 dispatch the event with:

document.dispatchEvent(anEvent)

and when this happens, any listener for 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
12:	Keyboard Events
13:	Mouse Events
14:	Touch Events
15:	Form Events