Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Event Delegation" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian reviews event delegation, which refers to the process of using event propagation or bubbling to handle events at a higher level in the DOM than the element on which the event originated.

Get Free Access Now

Transcript from the "Event Delegation" Lesson

[00:00:00]
>> Brian Holt: There's a thing called event delegation, or event bubbling. There's a bunch of different names for this. This is a favorite interview question for junior developers. So if you're trying to get a job I would suggest paying attention to this section. Maybe the whole course, but also this.

[00:00:14] [LAUGH] Also this part.
>> Brian Holt: So I have 5 buttons here, 1, 2, 3, 4, 5. And I could go through and bind an event listener to each one of them. That's a bit tedious, and also it's less efficient to do it that way. It would be really nice if I could do one event listener for all five, right?

[00:00:36] So what I can do is I do document.querySelector ('.button-container') so that's the div containing all of the buttons, right? And I add an EventListener on that and I'm listening for clicks and it's listening to clicks inside of that button-container, right? Now if I click on 2 for example, it's gonna say you clicked on button 2.

[00:01:01] But I did that with one EventListener on button-container. Now that it works is when I click on the button, if the button doesn't necessarily prevent it, that event bubbles to its parent. And to its parent and to its parent until it eventually reaches the root of the dom and it just fizzles out from there.

[00:01:22] But that means that every layer I can listen on those parents for clicks or changes or inputs or things like that. So in this particular case, I'm listening for a click on the parent container. So this does get fired, if any one of these gets clicked. You also get this event parameter that's being fed into you by the browser.

[00:01:44] And I can say, event.target, and then I can know which one was clicked on by looking at event.target, okay? And in this case, I'm just doing event.target.innerText, innerText is just gonna be 1, 2, 3, 4, 5, right? So if I click on 5 then I get button 5.

[00:02:04]
>> Brian Holt: I don't know why it's firing twice, it's probably something to do with, it should not normally fire twice.
>> Brian Holt: Probably cuz I've refreshed the page in some weird way.
>> Brian Holt: Yeah, I don't know, maybe this works different in Chrome.
>> Brian Holt: Let's check for just a second.
>> Brian Holt: Nope, it's working in the same weird way.

[00:02:43] Yeah I don't know what's going on with that.
>> Brian Holt: So, quit.
>> Brian Holt: Okay, something that I haven't done that you probably should do. Because it's listening for clicks and button container, it's also listening for clicks that are not necessarily on the buttons. So if I click, I'm gonna click right there next to the button.

[00:03:06] It's still gonna be on button-container. You clicked on button 1 2 3 4 5, so it grabs all of the text, right? So that's what's happening because I'm clicking on button-container and it's grabbing all of the text from all of the buttons. Because that's the inner text of button-container.

[00:03:23]
>> Brian Holt: So how would I prevent that from happening? Well, I could check if I did.
>> Brian Holt: If I checked if event.target.tag type, I'm gonna have to look at this.
>> Brian Holt: x = document.querySelector('button').
>> Brian Holt: Okay and I can say x.tagname, yeah. So what I can do here, I can say like.

[00:04:03] Oops, get rid of that.
>> Brian Holt: If event.target.tagName === 'button', butt, wow.
>> Brian Holt: I'm tired.
>> Brian Holt: Okay, and then here I would say alert, right, jeez.
>> Brian Holt: This would work, right. You would check the tag name, see if it's a button. If it's a button, then do it, if it's not a button, then ignore it.

[00:04:45]
>> Brian Holt: Make sense?
>> Brian Holt: Now, what happens if I wanna prevent this from moving up, if I wanna prevent it from bubbling even further, right? Let's say this parent container for button-container had another event listener that I wanted to prevent from happening. What you can say is event.prevent.
>> Brian Holt: Default I think well that's not what you would want to do it's preventPropagation I think is what it is.

[00:05:17]
>> Brian Holt: I wanna make sure, event.event prevent propagation I think is what it is. Stop propagation, is what you do, and that would prevent it from going even further up, right? And it would just stop it right there at that level. There is also prevent default which,
>> Brian Holt: There are some things that like, like forms, that if you like click a submit button on it will actually try and do like a full submit to like a server or something like that.

[00:05:49] If you wanna prevent stuff like that from happening, you'll use prevent default. There are several things that you can do.
>> Brian Holt: So this will be stop, stopPropagation.
>> Brian Holt: Okay, so that is event bubbling or event delegation, you can kinda call it either one of those things. And again, when I interviewed as a junior developer at some of the big tech companies, this was a favorite question for them to ask me.

[00:06:19]
>> Brian Holt: Any questions about events, about the dom? This is kind of like the surface of the dom but hopefully it's kind of demystified a little bit so you feel more comfortable experimenting with it. This is, I would say maybe 50% of the way that you're gonna interact with the dom.

[00:06:35] There's a bunch more stuff that you can do with it, but this is a good starting point. Event listeners, and event bubbling, and messing with style, and messing with text, and things like that.
>> Brian Holt: Good? Please?
>> Speaker 2: Could we talk about the target portion of that text?
>> Brian Holt: Sure, so events.target, this is the where the event happened, right?

[00:07:04] So here I have five different buttons, right? So if I click on button 5, then event.target is going to be this button right here. It would be the same object if I said document.querySelector for this button. It's going to be the representation of that button. I could just say something, let's just get this into code so I can mess with it.

[00:07:35]
>> Brian Holt: All right, let's just make this full screen I guess.
>> Brian Holt: So if I came in here and said something like.
>> Brian Holt: Event.target.innerText equals CLICKED. So that means anytime I click on one of those buttons it's gonna hit CLICKED, or become CLICKED.
>> Brian Holt: So, let's go back to my browser.

[00:08:06]
>> Brian Holt: Here, so as soon as I click on one of these buttons, like 3, it's gonna become CLICKED.
>> Brian Holt: Does that make sense? So it's whatever button that ended up getting clicked on.
>> Speaker 2: Yeah, just makes the whatever it's focusing on actionable?
>> Brian Holt: Yeah, so you can start interacting with whatever was the target thereof.

[00:08:35]
>> Speaker 2: Okay.
>> Brian Holt: Yeah, you got it.