From the course: JavaScript: Enhancing the DOM

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Event delegation

Event delegation

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial Buy for my team

Event delegation

“

- [Instructor] Event delegation is a smart pattern for handling events more efficiently. Instead of individual listeners on each element, you place a single listener on a parent element and then figure out which element was interacted with. For example, you could have a really big list with items and you would want to remove an item when it was clicked. You could go ahead and add an event listener to every item or you use event delegation. Whenever the list is clicked, you figure out which item it was that was clicked. You use the event object to figure that out, and then remove that item. Only one event listener instead of one for every element, you are right, that is great. Let's just get started with it. So here, you can see it in action. Once DOM content is loaded, we select the agendaList, this is little like a to-do list. And then, we add the event listener to the entire list. What do we do? Well, first we check whether the target's tag name was indeed a list item. If that's the…

Contents