Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Event Propogation" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

There are three phases in event propagation: Capture, Target, and Bubble. Justin demonstrates these event phases and talks about how the order of the propagation can be controlled.

Get Unlimited Access Now

Transcript from the "Event Propogation" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Justin Meyer: Let's add a DOM structure like this. At my window, it had document inside of it, it had a body element and a div and had an anchor element. I'm gonna click on that acre element. What's gonna happen is the browser is going to dispatch every event handler for click.

[00:00:20] That's on the window's capture phase.
>> Justin Meyer: And then, the document and the body and the div. And then, it's gonna dispatch all of the event handlers on the anchor element. And then, it's going to dispatch on the Bubble Phase all of the event handler is registered on the div, the body, the document and the window.

[00:00:43] So when I talk about, remember that last argument. You passed to add event listener. It was true or false. It said, use capture. That controls whether you're listening on this side or this side of how the event propagates when an event happens. So to kind of repeat that real quick.

[00:01:03] When you click on that anchor, actually I think we have a good demo of this.
>> Justin Meyer: What is the demo page? It is events propagation.
>> Justin Meyer: Okay, here's that same page. And let me show you the HTML for it.
>> Justin Meyer: [SOUND] Where is it? Slides.
>> Justin Meyer: So combined.

[00:01:39] That's propagation. Okay, so here, I'm listening on the body on it's. If you don't put anything here, it's the capture phase.
>> Justin Meyer: And that must not be true. Sorry, if you don't want anything here it's the bubble phase. So I'm listening on the body's bubble phase. So I'll go false here and I'm listening on the bubble, the body's capture phase.

[00:02:09] And I'm doing the same thing for the div, for bubble and body or sorry bubble and capture phase and the anchor for its bubble and capture phase. So when I click on the demo, I click on a link here. You can see it says, body captured, div captured

[00:02:33]
>> Justin Meyer: Then it's going to do the a, all of the event handlers in the order that they were registered. And then, it's gonna do div bubbled, body bubbled. So let's go back and explain this again. So [SOUND] by putting capture true. I can listen, so when someone clicks here.

[00:02:55] I can listen before that event actually gets dispatched on the event listeners on the anchor. Does that make sense? Like I can listen, I can pre empt. I can, if I wanted a logger that logged everything the user is doing, if I listen on the windows, for window clicks on the capture phase, that will get called before any event listeners on the incur are dispatched.

[00:03:17] This is called Event Propagation of the DOM, rights. Because when you click on a link, events are dispatched on the windows capture phase and bubble phase listeners. So make sense? Any questions about this? There's one thing I would like it if you guys retained and made sense.
>> Speaker 2: Can you give a real life example of when that might be useful?

[00:03:39]
>> Justin Meyer: A logger, on the capture phase, a logger is where it's really useful. If you wanna know every event that someone's doing. You would listen here because you can stop events from reaching the window by calling stop propagation that prevents the bubbling. If you listen here, no one can get to the event and stop it before you get it, if that makes sense.

[00:04:06] Good question, yeah.
>> Speaker 2: May I ask you? What about [INAUDIBLE] custom events to DOM know it's a triggered. Is there a way that you can do that without event listener?
>> Justin Meyer: Yes they're, the DOM does provide a way to dispatch events. I can't remember if dispatch events is the IE.

[00:04:26] You do in this, it's this weird kind of, you do some kind of at in the event and you provide all the properties for the event. And then, you can pass that event object to some method on an on an element, I forgot what it is and that a.

[00:04:43] You can do that with custom events, you can't dispatch your own custom events. So yeah, so let's move on for about a propagation. Basically, the short thing take from this is that when you listen, let's say you're listening on the window for clicks. You're still gonna be responding to clicks on an anchor element cuz that these events work their way through the whole DOM.

[00:05:10] Just wanna skip thru-
>> Speaker 2: Can you stop propagation on the capture phase?
>> Justin Meyer: Yes-
>> Speaker 2: As well as stopping propagation on the-
>> Justin Meyer: Yeah, you can stop on both phases. That's a good question. Yeah, so stopPropagation is this method that prevents events from going from one element to the next.

[00:05:35] Actually, I'm gonna open this up in open up here. Okay, so again, when I click on this, the body capture phase listener is gonna be dispatch first. The div captured phase is gonna be second. Now, it's gonna dispatch all of the anchor elements event handlers but in the order that they were dispatched because there's this weird target phase thing that happens.

[00:05:57] But then, the event is going to start propagating back up. Dispatch the div's bubble phase and the body bubble phase. Now, the crazy thing here, is in the capture phase of the body, the thing that's gonna be done first, if I do ev.stopPropagation.
>> Justin Meyer: And I do this example again.

[00:06:24] I am loading the wrong page. I'm sure that I'm in the wrong. It should be slides, demos, front in masters.
>> Justin Meyer: Here, we go, okay, so now if I do that. It only hits body captured and nothing else is dispatched.
>> Justin Meyer: So a few more things I wanna talk about with events.

[00:06:58] Just to kind of give you an overview. Even if it's not gonna sink in to my apologies that we're kinda running out of time here. I at least want you to be aware of it. There's a stopImmediatePropagation. So stop propagation only prevents a single, it prevents propagation from going the from the current element to dispatching the next element's events handlers.

[00:07:25] So if you call stop propagation and let's say the anchor has five event handlers. It won't prevent any of the other anchor's event handlers from firing. Which is kind of weird. To show what that does, let me just show the example again here. So let me remove the stopPropagation.

[00:07:42] And if you remember again, when I clicked this, a bubble actually happened before the capture phase. So let me, in the bubble phase. Which was registered first. I'm gonna call ev.stopPropagation.
>> Justin Meyer: So you see here, even though the stopPropagation happened here, this event was still fired. It's because stopPropagation only prevents it from the next element's events from being fired.

[00:08:19] All of the events on the anchor will still be fired. To prevent those from being fired, I could call stopImmediatePropagation. And this would stop all the events on the anchor from being fired. Any other on the anchor or any on the parent from being fired, yeah?
>> Speaker 2: If you attach click handlers to different elements, like [INAUDIBLE] as well as the body.

[00:08:50] How you tell the difference? It can mean what was clicked on and then someone mentioned current target which is the answer but-
>> Justin Meyer: Yeah, current target is the answer. So these, like I said the event object has there's two interesting things on the event object. So here, I'll listen on the, I'm listing the body bubble.

[00:09:11] I'm gonna put out the ev.currentTarg and the ev.target. I'm gonna write those out.
>> Justin Meyer: [SOUND] I'm gonna remove myself ImmediatePropogation two.
>> Justin Meyer: Okay, so when I click on this, the body bubbled is going to tell me the current target. That's whose event handlers are being dispatched. Well, the body's event handlers are being dispatched that's why it gives me the body.

[00:09:44] But I still get as the target the element who I actually clicked on. So that's the difference between currentTarget and target. So the cool thing we could do is essentially.
>> Justin Meyer: Even if we have the same handler.
>> Justin Meyer: And I think I could write phase or something. What is it, Alexis.

[00:10:13] I don't remember.
>> [INAUDIBLE]. Well, never mind don't worry about it. So here, I could put the same handler over and over and over again. And this way, even if we're using the same handler. We can still can tell, the function can still kind of tell where it is and a little bit.

[00:10:33] What's going on by just looking in the event object. So same functions can be called back every time. But it's gonna have, first it's gonna be in the body, the targets always gonna be the anchor that it's moved to the div then it's on all of the anchor's event, registered event handlers.

[00:10:55] And then, it's moving to the div and then to the body. Back to, back up to the body.