Event Delegation

[00:00:00]
>> WebDevSimplified: Finally, we need to talk about event delegation because inside of JavaScript when I had an event on my document and I clicked other places, it still ran that event. That's because of event delegation. It allows events to flow all the way through the entire DOM inside your project. So let's take a quick look at this DOM. We have an HTML element. We have a body, we have a div with a class of container, and we finally have a button inside of here.

[00:00:21]
When I click on this button, what actually happens is I've also clicked on the div that's wrapping that button because the button is inside that div, and that div is inside the body, so I technically also clicked on my body. My body is inside the HTML, so I clicked on that HTML, and the document wraps literally everything. So I also technically clicked on my document. So just by clicking on my button, I've technically clicked on actually five total different things inside my application, because when you click on one thing, it always allows you to click on all the other things around it, all the things above it.

[00:00:53]
And this actually flows through essentially a three-step process. We have the capture process, we have the target section, and then we have the bubble process. So let's actually see what this looks like in action. I have a simple little bit of HTML here where I have an outer element, I have a middle element, and then I finally have my button which is on the inside. And for each one of these I'm adding an event listener.

[00:01:13]
So for my outer element, I'm just having it log out outer div clicked. My middle one will log middle div clicked, and my button will log button clicked. So when I click on my button, what's going to happen is since technically I click on my button, my middle and my outer, it's going to log for all three. And if we look at the code, you'll notice it logs out button clicked, middle div clicked, and it logs out the outer div has been clicked because it goes through every single one of them.

[00:01:37]
And this is considered bubbling up. And if you notice in our three different stages, the final stage here is the bubble stage. So the first stage of the target stage, that essentially means the thing that you click on is going to be the first thing right now that's going to get that event. So in our case, our button is our target, that's the thing we clicked on. So that's going to be that phase two.

[00:01:55]
Then after phase two we bubble up by going up that tree. So the next thing we do is we check our middle. Does this have an event listener? If so, run it. Then we check outer if that has an event listener, then we run it. And that's why you can see out here it goes button, middle, then outer. It's going essentially outward from the most inside thing all the way to the most outside thing. That's the default behavior of how events work.

[00:02:16]
They start where you click and they radiate outwards from there. Now we can also change how this type of behavior works by using stop propagation that essentially defaults to stopping this behavior where the event bubbles up to everything else. So using the exact same code, you can see we have our inner event listener login button clicked, our middle one says this won't run, and our outer one says this won't run either, and that's because inside of our inner we're stopping the propagation, and that means instead of letting the event continue to bubble up all the way to the top, it just immediately stops and the event pretends it never existed for all these other elements.

[00:02:50]
So now this will only log out button clicked because when we click our button, it stops it from getting to anything else inside of our event and that's that bubble phase. It gets to here through that target phase, we stop the propagation, which means all those other phases is not going to happen at all and it immediately stops out. But up until this point we haven't actually talked about this capture phase.

[00:03:09]
So let's talk about what this capture phase may look like. The capture phase essentially is the reverse of the bubble phase. Instead of starting at the most inside portion, this starts at the most outside portion, works its way down until we get to where we clicked, and then we go to the bubble phase that works its way out. So here, in order to run an event in the capture phase, you actually need to pass it a third parameter.

[00:03:30]
So here we have our event. We pass it the first parameter, which is the thing we want to do. The second thing is what's going to happen when that event occurs, and we can pass it a third optional object which can actually take in quite a few things. The most important though is this capture property. If we set this to true, this will run during the capture phase instead of the bubble phase. By default, events will bubble up and they run in that bubble phase.

[00:03:53]
But if you want something to run beforehand, that will happen in the capture phase. So by setting capture to true here, we're now running this event in that capture phase. So to take a quick look at what this would look like, here we have our outer div, this outside portion, and we're making sure this is set to be a capture of true, so it should run during that first capture phase. Then our inner div is just going to run during that normal phase, the target phase.

[00:04:18]
So when we click on the button here, we first use the capture phase, so we run the capture on our outer, and then if that has an event listener, we'll log it out. Finally we get to the button logged out, and then we bubble back up to this outer div. So we start at the outside, work our way in and then work our way back out. So if we're running an event in the capture phase like this one, it'll actually run first.

[00:04:38]
So you can see here our outer div logs the click first and then our button logs next because this outer div is running in that capture phase which starts by going outside and then going in. Now by default, the bubble phase is what's used by JavaScript, and for most event listeners that's probably what you want to use. The main use case for this capture phase is actually stopping an event from getting somewhere else.

[00:05:01]
For example, if I want to make sure that when I have a button inside my outer div that it can never get a click event listener, well I can set up a click event listener to run during the capture phase of my outer element and just stop that propagation. And that not only stops it from bubbling up, but since I'm in the capture phase, it also stops it from going down and getting to that button itself.

[00:05:21]
So essentially it skips all the rest of it. It never goes down further, and it never starts to work its way back up. It just stops right here at the outer element and never actually logs. So when I click on my button, nothing will get logged in this page because this event listener is essentially completely skipped. Now one kind of caveat I want to mention is that not all event listeners can be delegated, and that's because there are very few events, mostly the focus and blur event, that don't make sense to be delegated.

[00:05:46]
For example, if I focus on an input, I'm specifically focusing on just that input. I'm not also focusing on the div around it, the body around it, and the document around it. So very few events, mostly just focus and blur, don't behave like this. They don't delegate and bubble, but all the rest of the events do that type of bubbling behavior by default.