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

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!