This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Event Delegation" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: So there's one other thing that's good to be aware of. It's Event Delegation, it's this cool thing in jQuery that allows you to listen. Instead of listening on every, let's say you wanted to listen to when all anchors in the page are clicked on. Instead of listening on, going to every single anchor and sending up an event handler, you can set up an event handler on the body, and check if the target was an anchor.
[00:00:32] So, register an event handler there, and then what you would do is wait for that event to propagate up to the body, dispatch the body's event handler, and then you would check the target to see if that was the element you were looking for to do stuff on.
[00:00:51] So to give an example, if I wanted to know any time an anchor was clicked on and just say, you just clicked on an anchor, here's the code. I can listen on the body for a click, check if the target was an anchor, and then say, you clicked on an anchor.
[00:01:10]
>> Justin Meyer: Kind of handy. That's way faster than going to every single element and setting up an event handler. And, this works if people add or remove anchors at will. So, I have an event delegation but I'm not going to show. I'm just going to say, jQuery has an event delegation.
[00:01:30] It has event delegation that lets you listen on an element. But listen for any time a div might be clicked in the body, and will call this back for you. So this is super useful if you have anything high performance. If you're trying to draw thousand rows, like tr's, and you want to listen to any time one of those tr's is clicked, don't register an event handler on every one of those table rows.
[00:01:58] Set up on some element, something that listens to when a tr is clicked, and only setup one event listener, much faster. So what jQuery's onClick does, just to walk through it again a little bit better, is it listens to, has its event listener on the body, and then it's just going to check if this matches the selector div.
[00:02:25] And, if it doesn't, it's going to go to that element's parent and check if that matches the selector div, and if it does, then it's going to do the call back. It's going to call some call back. And I have a, there is an example of this in place, but I'm not going to walk through it, unfortunately.
[00:02:51] I don't know if Mark will let me send in a personal video that I could add to this later.
>> Mark: Yes, sure.
>> Justin Meyer: Okay, I'll make this last like half hour of content, and then I'll clean it up good and I'll send it, and you can append to the-
[00:03:08]
>> Mark: Yes, yes.
>> Justin Meyer: That works?
>> Mark: Yes. Other teachers have done that.
>> Justin Meyer: Okay, yes.
>> Mark: Just link it to this, underneath the video.
>> Justin Meyer: Yes.
>> Mark: Or underneath the course, extra videos.
>> Justin Meyer: Yes, you can do whatever you want. Okay, so I'll go through how Event Delegation is set up, and I'll probably do a run through those whole events, so that you guys can get it.
[00:03:26] And my apologies for kind of running late. There's a lot to squeeze in if you're going to learn everything there is to know about JavaScript in the DOM and jQuery in two days. So thank you for hanging in there. Don't, the one final point, don't use DOM 0 and DOM 1 event handlers.
[00:03:48] You might see people sticking on click in the page like this. Now if you're doing it with Angular, or one of the frameworks, it's a little bit different. Why it's okay there, and not okay here. But this is how people used to add event listeners. Don't do that, I still see that once in a while.
[00:04:06] And instead of doing this, use the addEventListener, because that allows you to have multiple event handlers instead of just one event handler on an element.