Transcript from the "Event Delegation" Lesson
[00:00:00]
>> Brian Holt: Event Delegation. So this is, people love to ask this question of junior engineers in the interviews. So if you're trying to get a job as a junior engineer, this is probably one to pay attention to. Just forget everything else I just said. Just kidding. Don't forget it.
[00:00:18]
So I have five buttons here. As you might imagine if I wanted to have an event to be responded to on each one of those buttons, it's kind of burns some to go through an event listener to every single one of those individually. It'd be super nice, if I could have one event listener that would respond to all five.
[00:00:35]
Now this is done through a process called event bubbling.
>> Brian Holt: So what I can do here, rather than have each one of these have an individual event listener. What I can do is I can actually listen for events here at the div layer, so the the div button container above it.
[00:00:55]
I'm listening for events on that. It'd be super nice here if I didn't have to listen for events on every individual, but it'd be really nice if I could just listen to events like one event listener at a top level. So here, I have this button container. And I'm going to bind an event listener to the button container, not to the individual buttons.
[00:01:15]
The way that events work in the DOM, is that the button or the button here, if I click on one, it's gonna fire an event, and nothing's listening for events on that button. So then what it's gonna do, it's gonna go to the next layer above it. It's gonna go to this button container above it.
[00:01:28]
And if it doesn't anything, it just keeps going up until eventually it bubbles out. It bubbles to the body level and then it's done. So what I'm gonna do is I'm going to capture that event here at the button container. So if I click on this one, notice it still says you clicked on button one.
[00:01:45]
I don't know why it's doing it twice, but whatever. Who cares. But I clicked on button forward. And it's actually able to respond differently, based on which button I'm clicking on. And the way that I am doing that is that same event.target. So, click even function, and it takes in this event as a parameter.
[00:02:05]
All event listeners take in an event, you can just depend on that being there. And then I say alert, you clicked on button and I'm looking at the inner text, because this has three in it. So it's just saying, you clicked on button three.
>> Speaker 2: Event.target means the thing that spark to the event, essentially?
[00:02:28]
>> Brian Holt: That's exactly right.
>> Speaker 3: If you didn't have the class, then you would have to do with each one on their own, right?
>> Brian Holt: If I wasn't gonna do it at this diff layer, if I wasn't going to do one event, if I wasn't gonna do event bubbling.
[00:02:47]
Then yeah, I would have to bind one individually to each individual button, which is kind of a pain. Event.target or event.target. This is gonna be just like Emma said, it's gonna be whatever sparked the event. Wherever the genesis of that particular event is. What happens if I want to get where the event was caught.
[00:03:07]
So I wanna get access to this div. I don't know why you would, but let's just say here you wanted to say event dot and spoiler, it's gonna be current target. Let's say, .style.backgroundcolor= orange, something like that.
>> Brian Holt: So just paste that in there.
>> Brian Holt: Yeah sorry, this is gonna be backgroundcolor like that.
[00:03:51]
>> Brian Holt: And then, so that allows me to get access to whatever where I'm listening for the event, not necessarily where it's sparked from. Now let's talk about one issue with this that I have. My issue now is that I'm listening for click events at the button container level.
[00:04:10]
What happens if I click on button container and not on a button? So if I click over here.
>> Brian Holt: So you clicked on button 1, 2, 3, 4, right? Because that's the inner text of that. So it's just grabbing all the text from all of its inner nodes.
[00:04:27]
And getting that back to you. So that seems like it's a problem, doesn't it? So the way that you can mitigate that is you can say, if event that target tag name, triple equals and it's all in caps for some reason, I don't know button.
>> Brian Holt: And then you move this up there, like that.
[00:04:59]
>> Brian Holt: And now that will mitigate our problem, cuz if the tag name is div, which is what this is gonna be then is gonna say cool, I'm just gonna not do anything about it. Go ahead.
>> Speaker 4: In order to get this to work, you're gonna have to put it into your console.
[00:05:14]
>> Brian Holt: Correct, yeah.
>> Brian Holt: So now if I go in here, it's not gonna work.
>> Brian Holt: But if I click on that, it'll still work.
>> Speaker 2: So why is button all in uppercase?
>> Brian Holt: So something to keep in mind is that, browsers and JavaScript are quite old, right? And there's been a fundamental idea of whenever we revise the DOM, we revise JavaScript.
[00:05:51]
We don't wanna break anything that used to exist, right? So that's why like if you go to the space channel website for space channel one, it's still out there and it still works. Which to me, I think it's actually quite cool. That if I write something, and I put it on the Internet, and as long as it's still on the internet, it's going to work indefinitely.
[00:06:09]
So it's actually an archival, as well as a human history since the Internet started. But, the part that's kinda crappy about that is we end up with stuff like this that it was defined 20 years ago, that the tag name was always gonna be in upper case. And now we're still stuck with that decision 20 years later.