Now that we can dispatch and listen for our own custom events, it's time to talk about some important things such as what can dispatch an event, what can listen for that event and how far does that event go? Because the answer to that allows us to do some pretty cool things. Uh, admittedly they are cool things that we have been doing, it's just that we haven't really talked about it. But before we get into that, I need to fix something.

it's just that we haven't really talked about it. But before we get into that, I need to fix something because at the end of the previous episode, we set up an event listener for the UI submit game event that doesn't exist. It should be UI submit. Guess so I broke it at the end of the previous episode and I'm sorry, but it's fixed now so we can go on. So what I want to talk about is called event bubbling and it's an important concept.

So what I want to talk about is called event bubbling and it's an important concept because it allows us to do things like this where we can set up a global event listener. So imagine this, you're standing on a stage and you're screaming your lungs out. The noise coming from you, uh, originates from you. You are the source, you are the target of that sound and the sound is going to go out into the auditorium. It's gonna go to each row.

and the sound is going to go out into the auditorium. It's gonna go to each row and the auditorium is gonna go up to the balcony. If there's two balconies, it's gonna go up there. It's gonna go all the way up to the top of the auditorium and that's what events do. Or at least that's what built in events do. Like for example, this is the click event listener that we set up at the document level, but the actual elements

that we set up at the document level, but the actual elements that receive the event are two buttons. One is for the submit guess button, the other is for the end game button. So if we take a look at the HTML here, right here is the submit button for the guests. If we click on this button, that click event originates here. So the button is going to dispatch that event.

originates here. So the button is going to dispatch that event. Now we can listen for that event on that button object and that's perfectly fine. But then that means that we also have to set up event listeners for the quit button. And if we wanted to listen for the click event on anything else, we would have to set up another event listener there. And the more event listeners that we set up,

to set up another event listener there. And the more event listeners that we set up, the more work the browser has to do, it's actually more efficient to set up a global event listener for a particular event and then determine which elements received that event or, or dispatched that event I should say. So if we click on this submit button, we can dispatch it, well it does dispatch from there, we can listen for it from there.

well it does dispatch from there, we can listen for it from there. But that event is also going to bubble up to its parent, which is this div element. And from there we can listen for the event there or it's gonna bubble up to its parent, which is this div element. We can listen for it there and it's also going to bubble up all the way up to the body, which we can listen for it there.

and it's also going to bubble up all the way up to the body, which we can listen for it there or it will bubble up to the document where we do listen for it. So we can listen for any event on any element as long as it is an ancestor to the event target. Because all events at least all built in events bubble up from the target all the way up to the document. Now custom events don't do that by default. Like for example here where we are listening

Now custom events don't do that by default. Like for example here where we are listening for the click event, if the submitGuess button is clicked, we dispatch our UI\SubmitGuess event at the document level, which you know makes some sense. But you know, we could also make the argument that it makes more sense to dispatch that event from the button itself because the click event originated at the button. You know, our own custom event could originate from there.

because the click event originated at the button. You know, our own custom event could originate from there. But by doing so, we are actually going to break our application because custom events don't bubble by default. They start at wherever we dispatch them and they end where they are dispatched. So if we want a custom event to bubble, we have to explicitly say that this custom event bubbles, so the object that we pass

explicitly say that this custom event bubbles, so the object that we pass to the custom event constructor will have the bubbles property as well as our detail. But by setting bubbles to true this UI submit guest event will originate from the button and it will bubble up to the document. So if we try this again and submit our guests, we can see that it is working as it should.

and submit our guests, we can see that it is working as it should. Now you can do the same thing for normal events. You just pass a second argument, which is an options object, and you just set the bubbles property to true. Uh, you can't include a detail because details are only allowable within a custom element. So if you need to bubble an event, it doesn't matter if it is a custom event or just a normal event, you can set it to bubble.

it doesn't matter if it is a custom event or just a normal event, you can set it to bubble. So event bubbling is a very important feature. It allows us to essentially create these global event listeners which is more efficient for the browser. But then the question becomes do we set our custom events to bubble? And that is, well that's really the question, isn't it? Because it depends upon where you dispatch it. If you dispatch your events at the document level,

Because it depends upon where you dispatch it. If you dispatch your events at the document level, there's no reason for it to bubble because it's already there at the document. But if you plan to dispatch your events at an element somewhere within the do, but you still want to listen for it at the document level, well yes, you will need to set it to bubble. Is there a right or wrong approach? I don't know.

you will need to set it to bubble. Is there a right or wrong approach? I don't know. I usually take the lazy way and I just dispatch and listen for it at the document.