How To Make Your Own JavaScript Events

JavaScript has tons of different events that you can listen to, but you can also create your own custom event for any use case you can think of. Best of all it is incredibly easy to create a custom event in JavaScript. These events are great for implementing things like touch based gestures, and even communicating across your application.
📚 Materials/References:
Event Listener Video: • Learn JavaScript Event...
Event Listener Article: blog.webdevsimplified.com/202...
Custom Events Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:40 - Basic Custom Events
02:43 - Custom Event Options
05:51 - Passing Data To Custom Events
06:48 - Double Click Example
#CustomJSEvents #WDS #JavaScript

[@christopherholt3782]

Been watching you for years now. You're such a good instructor, I attribute a lot of my knowledge to you, thank you so much!

[@infinitepurelive]

dude your content is always just awesome, I can't wait to use this in a project

[@ZacharyBetz]

I’ve been doing web dev for years and just learned about custom events. Thank you for sharing 💪

[@astec9051]

U are legit the best JS youtuber ever, keep doing your content because u are just the definition of perfect !

[@ugljesavojvodic3384]

Nice video 👍 I like that you cover subjects like this (rare subjects). Others have videos that are mostly same and similar with other youtubers.

[@andianwar5784]

Thanks for speaking clearly, as an Indonesian which i dont speak native english, your video is really helpful, thank you

[@LePhenixGD]

Using custom events in conjunction with web components is the cream of the top!

[@ChrisAthanas]

Such a clear explanation. Kudos.

[@kakakakaka7955]

For the use cases I would add a situation when you want to integrate React UI and a game engine. Using custom events you can make the game engine and React UI communicate and share data between each other.

[@mqkDURAN]

I don't know where you work but they are lucky to have you.

[@banegool]

Thanks!

[@WebDevSimplified]

Thank you for the support!

[@smtp_yurzx]

You should make a tutorial on how you keep your hair looking so good!

[@montebont]

Nice one - thanks. But I wonder about the use case. I think you mentioned decoupling different parts of an app which makes sense. But wouldn't a simple PUB/SUB mechanism (essentially a MAP where the key is the event "name" and the value is an array of handlers) be more efficient?

[@c__beck]

Will there be a follow-up video about using events in Node,js?

[@Johnny-rf4iu]

+1

[@hpgildwel]

NodeJS events are well documented if you can't wait

[@sriramiyer9840]

Do a follow-up video on how to do this with typescript's types please

[@radezzientertainment501]

lovely vid

[@aryanjainascanio3388]

Hi, How do you upload a document publicly for everyone like you did with the 2048?

[@Marcosmapf]

when would a composed event be more useful than a postMessage api call?

[@7heMech]

Is this only for the web, or it works for nodejs aswell?

[@navjotsingh2457]

Ty

[@Mickey_McD]

I used this in conjunction with a Promise; I had the Promise resolve when my custom event was generated.

[@Yoreni]

can you put your own event data in the dispatch event function

[@fraidoonhu9284]

Great

[@Primadex]

Weldone boss, pls can you make a video on how to set isTrusted=true

[@stoneshou]

Please do some explanation on shadow DOM!

[@stoncjoesperanto8632]

Hard to read, text is too small (whereas there's a lot of empty room in the screen)... :-(

[@TheScriptingLegend]

Waiting for how to make your own JavaScript

[@yoskokleng3658]

Sir, How to detect closed tab browser by javascript event? not reload ( i want to do something when user try to closed tab or exist browser directly without logout my web application ). thanks 🙏

[@BGdev305]

@WebDevSimplified you never showed how to "communicate between 2 different parts of the application"?

[@mznunaya]

I love you Kyle

[@roshanlalsahu7846]

can u please make video on shadow DOM

[@mojlbhr1480]

Great! but the example not enough for what is the use case.

[@tolotrarabefaly1333]

What about EventEmitter?

[@AbhishekGupta-zf4em]

Bro you got amazing hair :)

[@be2wa]

Isn't there a native dblclick event already?

[@Laura69]

It is just an example showing how it could be implemented.

[@rotterwane426]

Klye, would you prepare for angular tutorial

[@MrCC-hx8xr]

learn vue or react, angular will die

More appropriate name would probably be 'creating DOM events'. Technically this is not connected to Javascript.

[@thesneakyturtel]

:thumbsup:

[@charlesscholton5252]

Not seeing the ; at the end of lines and the reliance upon ASI is sort of traumatic for me. Lol

[@igu642]

❤❤❤❤

[@JEsterCW]

Sheeeesh

[@zainou8460]

Why would someone need a custom event ?

[@almogosheriko]

There might be something that you want events to trigger for that aren't covered in JS's built in events. It really depends on what you need to do for your project. The possibilities are endless.

[@SteveUrlz]

no offense or anything, I was just wondering why do you misspell often. I see my CTO coding in the same style and was curious if this is dyslexia or just writing fast

[@tognolibsas]

The sound is too low man

[@anandpawar2096]

100 like

[@suelingsusu1339]

👏👏👏👏🙏🙏🙏🙏🙏👌👌👌👌👌🖖🖖🖖🖖🖖🖖🖖

[@Dream-Web]

276th viewer

[@Nick-dt7ut]

Second comment

[@sarrthecode]

First comment

[@mehrdad1068]

Please make tutorial for like_unlike_dislike_undislike_comment_share_replay_save_unsave 🙏🙏🌱🌻

[@CodeAProgram]

Learn new