Q11: Event Propagation

[00:00:00]
>> Okay, ready for the next question? What gets logged when clicking button? I'm not gonna say all the, cuz that would just be confusing, but is it A, B, C, D, or E? All right, so let's look at the answer. So the right one is E. It's A, C, G, F, D, E.

[00:00:21]
So when we talk about events propagation, there's three phases, right? First event goes down to the target element, this phase is called capturing. And once it's actually at the element, it's called targeting, like it's finally at the target that it tries to capture. So in this case it's the button cuz we clicked the button.

[00:00:38]
And afterward, it goes back up to all its ancestors which is called bubbling. Now whenever we register an event listener, we can actually tell or we can pass a second argument like true or false to say whether it should run during the capturing phase or during the bubbling phase.

[00:00:54]
And by default, it always runs during the bubbling phase, so if we don't pass a value it runs when it goes back up, otherwise it runs during the capturing phase, so when it goes down. So when we pass true it runs during the capturing phase. So in this case, you can see that we're logging A during the capturing cuz we had passed true, then C also because we passed true, G, same thing.

[00:01:16]
Then we go back to F, that's the one on the button where we didn't pass anything, so it runs during the bubbling. And then we have the longer one with D, and also stopPropagation, which we'll talk more about that later, and E and then B. So the event first goes all the way down to all the elements, finds console.log("A"), logs A, C, logs C, G, logs G.

[00:01:39]
Finally, it's at the targeting phase, goes back to bubbling, so it logs F. Hello, yeah, there F, and then it goes to this one. So first it logs D cuz there's a console.log ("D"), but then you see the E.stopPropagation. And what this method does, is it essentially says to the event, please don't propagate further up or down depending on what phase it's in, but still execute all the event handlers that are on the current elements.

[00:02:05]
So it won't just stop executing right away. When it gets invoked, it will still execute all the event listeners on the current element that it's at. So right now we just have one, but if it had multiple, it would have also run those multiple. It just won't go to the upper div, to the outer div again.

[00:02:23]
So yeah, it will still log E because it doesn't stop executing right away, it will still just go execute the rest of the handlers, but yeah, it doesn't go back up. And then there's, I don't know why E? There, there is E. There's also the stop immediate propagation, I believe.

[00:02:39]
And in that case, we're telling it, if the current events had multiple event listeners, or the current elements have multiple event listeners, do not execute those. So with stopPropagation, we're still saying like you can still execute the event listeners with stop immediate propagation. We're telling it, no, also don't execute those, just stop propagating even to the other event listeners.

[00:03:00]
Yeah, hope that made sense? So during the capturing phase, it might make sense to add an event listener if you want to, maybe, first ensure that it should even go there. I don't know, you can just run checks to say like, okay, does it make sense if the event target is button?

[00:03:18]
Maybe based on certain conditions, should it really go there or not? And if that's not the case, you can just run the stopPropagation. And during the bubbling phase, we actually have access to the targets value, which we don't have during the capturing phase. So maybe in that case during bubbling we want to, I don't know, have some condition based on the target value in which case you have to propagate or not.

[00:03:42]
Yeah, I don't know, it just gives you the flexibility. It's different use cases, I guess. Yeah, a question?
>> What was the definition for targeting again?
>> Targeting is more when it finds the, like nothing really happens, it's just when it finds the element that the event target is.

[00:03:59]
So in this case, it's button, cuz we clicked the button. So targeting, nothing really happens. I don't think there are any listeners you can add to targeting. It's just kind of when the event gets its value, like this is when it finds the element that it was supposed to go for.