Creating and Dispatching Custom JS Events

Did you know that, even though the browser comes with a long list of built-in events, you can create your own custom events and have them dispatched whenever you want?

[maxkehayov]

Good job, Steve! Custom events have been bugging me lately and no amount of reading could get the job done for me. YouTube also seems to lack good videos on the topic and I dare to say yours is right on the spot. Thanks!

[NeilTruick]

Yes, yes, YES! "Crystal clear" is an understatement regarding the explanation and the presentation...

Great tutorial, Steve...thank you!

[RedEyedJedi]

There are literally no clearer videos on the internet on how to learn JavaScript. When I want to learn something to do with JavaScript and I want to learn that part in one video without messing about and having to look up other things or watch it again and again, your channel is the first place I look.

[Snoo]

Very helpful, I tried reading about custom events and couldn't understand a thing, because all the explanations I found online were rushed, more like cheat sheets than actual explanations for people to learn from, but this video explained them very well and simple.

[ibknl]

Perfect explanation. Thank you for the video.

[ankitrajput]

Thanks, Steve! This is what I was looking for. Perfect!

[friendmusic]

Can you go into any kind of detail on a situation where this would be better than just calling the 'wasBorn' function within addParagraph? I understand that this was meant to be an example video, but I haven't found a situation where it was better to create a custom event than just call a function and I wonder if it's because I'm missing something.

[mohammadaliafrasiaby]

What is the difference between appendChild, insertAdjacentHTML
i dont no
but
i think insertAdjacentHTML is cleaner

is it?

[pumbo_nv]

I believe modern browsers will automatically GC event listeners on a removed element as long as it's not referenced anywhere.

[VeaceslavBARBARII]

12:04 I'd also add this event listeners to the parent, not children, as they get created and destroyed dynamically... handling events for children is more troublesome.
Thanks, Steve!

[VassiliySmith]

Why not use {once:true} option to remove listener automatically

[sabarishchandramouli]

Hey Steve! Thanks for the video. I have a doubt in exactly 7:15 when you are dispatching the event. Do we use dispatch event to call the function when a custom event occurs because that is what is done in the previous addEventListener() method. When a custom event occurs, the addEventListener() listens to it and calls the related function. Please let me know why we use dispatch event

[sergiomallmachavez]

I tried to do a dispatchEvent on a button with disabled state in ie11 but it won't fire it. Help me please :(

[henrywang]

Thanks for the tutorial Steve! Have been struggling with the idea of custom events lately and I think this video(as well as the series) definitely helped me gain better understanding into how events work! Just want to make sure I got it right: so the code before you call dispatchEvent is the logic of the event correct? i.e. the chunk of code before dispatchEvent determines the logic of my custom event, and when these happen, my event meets its criteria and can be triggered if there are elements listening to it, correct? Thanks in advance for your answer!

[mohammadaliafrasiaby]

good job
after js
how long does it take to learn node .js???

[jehontanda]

@steve Griffith, can i also ask something ?

[longjohnny]

Is there a way to dispatch events from an element such that the event can be detected by CHILDREN of the dispatching element?

[sloppyy]

it's crazy how much more complicated they make this in javascript than C# (where i'm coming from)

[suppaduppa]

Its considered bad practice to add EventListeners to elements in the dom that will be deleted. A better approach it to add the EventListener to the parentNode.

[neatpolygons]

Thanks a bunch, I'm so glad I found your channel. In my case, I wanted to create a notification event that should be dispatched on the whole page. I created an empty div for it and dispatched the event on it but this seems wrong. I wonder if there's a way to dispatch in the whole page without having to assign it to a certain element.

Edit: document.dispatchEvent(event) did it