Events are a huge part of what makes it possibly to have dynamic pages, so knowing how to work with them and understanding how they work is pretty important. Take a look at a real, popular interview question that tests your understanding of events.
- [Instructor] Events are a huge part of what makes it possible to have dynamic pages so knowing how to work with them, and understanding how they work is pretty important. Now let's take a look at a real popular interview question that tests your understanding of events, and that is about event propagation, and how it works. The modern way to create events are by adding an event listener to an item in your dom, and you need to pass three different parameters. The first is the type of event that you want to track.
So, for example, here would go a click, or something else. The second is the callback, or function, that you want to execute when that event takes place, and finally, the type of propagation. And the type of propagation is a boolean so you specify a true or a false value there. Now that determines the order in which the event is tracked through the dom. We'll take a look at an example in just a minute, but, most of the time, this value is going to be false which means that the event bubbles up from the element that was the target up through the top of the dom.
The other option is a capturing event which does the reverse. It goes from the top of the dom to the element that you're targeting. Now you can also control whether the event continues to propagate through the dom, and I think this is a good time for an example 'cause these are sort of difficult to understand unless you see them in action. So here we have a pretty simple page. We have a series of boxes, and here they are. There is one that has an id of special, and that's the blue one. And if you take a look at the style sheet.
I have a pretty simple style sheet here. I'm using flexbox to vertically center these boxes on the page so no matter what size I make this we're going to be vertically and horizontally centered. And then I have sort of a default color here, and I give them a width and a height, and then the background has this background color, and I make that the full width of the browser. Now the boxes themselves are block elements, and they have this red color right here, and then I give each of them a width and a height as well as a border radius, and you could see that the special box has a different background color which is this blue right here.
So the script is completely blank right now. Let's go ahead and start out by creating an event. Now we could target a specific element in the dom. So we could say something like bar, and box, and then use querySelector, and target a specific item. So we could target the one with the id of special, but the cool thing about event listeners is that you can have them target a parent element, and then track the click anywhere inside that parent element.
So if you look at the index.html file I have this element called boxes right here, and all of my boxes are inside that parent element. So instead of creating individual events for each of the boxes I can just track any click in this div right here with a class of boxes. So that's what I'm going to do. I'll call this actually boxes, and I'm going to target the element with the class of boxes which is sort of the bigger element.
And then once I do that then I can do, on that element, I'm going to add an event listener. And in here the event that I want to track is a click, and then I'm going to create a function literal here. Let's go ahead and add the semicolon, and then in here I would do whatever you wanted to do when somebody clicked on one of these items. Every event returns an event variable which you can store in a variable right here.
So you can call this event, but usually you just call it e, and then you can, if you want to, log that to the console so we could see what is going on with the event. So let's go ahead and save that, and we'll poll the console right here. So I'm on Google Chrome. I'll right-click, and then select Inspect Element, and make sure that I'm in this console tab right here. And then if I click anywhere on the page I should see an event sort of come up. Let's go ahead and clear that out, and click on one of these boxes. And you can see that, if I open this event up, there is a ton of information right here about the event.
The position, what I clicked on. So, for example, you see that there is a target right here. The target is this div with a class of box so it actually keeps track of which one of these boxes I clicked on, and that's stored in this target. Sometimes you can use the source element, and there is the event type. It's a click. So once you have that data then you can do something with that element. Let's go ahead and close this out. So we can say something like let's go ahead and remove the element.
So to do that we will use this target, and we got to grab the parent node of the target. This is how you delete an element, and then we will remove a child that is the target element here. So, essentially, what this is going to do is just delete the element that we click on. So once it's reloads you can see that as I click on any of these elements it's showing you the event in the console. Let's clear that out, but then when I click on it it deletes that element, and that's great.
One of the problems is that if I click on this background it's actually going to remove that element as well because, remember, the event is being captured on the item with a class of boxes. So remember that is the sort of big parent element. So if I click on that element it's actually going to remove that element as well. So one thing we can do here is just make sure that the element has the right class name. So let's go ahead and do if e.target className and if it's equal to box then I'm going to remove the element.
So what this is going to do is let's go ahead and refresh. It's going to prevent the deletion of this background because it doesn't have a class of box in it, but it's going to delete any of these other ones. So that's pretty cool, and you can see that I didn't specify a event propagation mode, but you can if you want to right here, and it would go here. And traditionally you want to put in here false. Let's go ahead and save this.
Let's go ahead and create a variable to target that element. So I'll do document.querySelector, and I'll do an item with a target of special here. That's going to grab only that blue box, and then, in here, I'll add another event listener. So let's go. I'll just copy all this actually, and just paste it here.
Get rid of all this stuff, and make sure that I have special here. And then in here I can go ahead, and say e.target, and I'm going to change the background color of that element when it is clicked on. Right so let's go ahead, and save this, and make sure that it's refreshed if it hasn't already.
And you'll see that what's actually happening now is these elements are being deleted, but, and you can't really tell, this element is actually being called. Let's actually go ahead, and move this console.log from here, and move it down here. So it's only going to console.log when I click on this blue one. So you can see that when I click on that blue one this event is actually sort of displayed, and, actually, let's go ahead, and put another console.log up here.
And we'll just call this other for right now so we can tell the difference, and, once this reloads, if we click on this you'll see that it'll say other. If you click on this it'll say, again, other. But if I click on this one you'll see that we actually get two events. Right we've got the mouse event from the click right here, and it probably went ahead, and changed that background color to something else, but as soon as it did that then it noticed that there was another event here called other, right? This one over here, and it went ahead and removed that element.
So we never saw it. It happened so fast. So the problem is that it's capturing both events, and, in this case, we really wanted to capture only one event, and, to do that, you can add a command right here called e.stopPropagation. So what that will do is it will only, if I click on this element, it'll only capture this event, and it'll stop propagating up the chain. So remember if you click on an item it's going to go up and down the chain, and so, when we click on this element then we say stop propagation.
It's not going to capture this other event, and this is really where this propagation thing comes into play. So let's see what happens now when we click on this. See it changes color, but the other event, because we stopped the propagation, doesn't bubble up. So it doesn't ever get to this event, right? And we can still delete the other ones, but this one will never delete because as soon as we click on it we sort of stop the propagation. So this is also where the propagation type, this false or true value, might come into play because, remember, by default when I click on an event if it says false the event is going to bubble.
So it's going to go from the inner most item up, and if I turn this back to true then the event is actually going to go from the top to the bottom. So notice that if I set this to true because this event is bubbling from the top down this event's actually happening first, and so the stop propagation is not even mattering. It's actually performing this event before it ever gets through to this one, and that's where this propagation type, this true and false value, comes in handy.
So something to keep in mind with events. You may have done a ton of events, and not known what this value is for, but hopefully this kind of explains both what the propagation type is for as well as the stopPropagation method. So here's a couple of different websites where you can check on more information about events and propagation as well as a couple of courses where you can learn more about events in our library.
As usual if you have some ideas for this weekly series. Maybe you want to share with me some other questions you've been asked or have asked in interviews. You can connect with me in LinkedIn, or in just about any other social media network like Twitter or github at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.