Event Delegation | JavaScript

Examine how we can use event delegation when we have dynamically created or modified child elements. Transcript Let's look at a use case for event delegation. So in this case, I have an unordered list of animals and I want to trigger a console statement whenever any one of these list items is clicked. Now, my first approach might be loop over all of the list items and add an event listener to each one of those elements. But if I do that, what happens when we add falcon to the list later in our application so if we go back to this and i click on any of the animals you can see it will properly log that the animal was clicked but if i go to click on falcon nothing happens and that's because at the time where i created all these event listeners i didn't create one for falcon because it didn't yet exist so if i wanted to add new items to the list every time i'd add an item i would have to then say item.ad event listener and repeat this process for every new item that gets added or removed that could quickly become pretty pretty difficult to maintain so let's think of a better way so instead of looping over each of the items since we know that events will bubble up we can set the event listener on the list then whenever one of the elements below it is clicked the event will bubble up to the parent and we'll check to see was the event target that is the the item that was clicked was it a list item and if it was then we will log the event so with this new approach when i refresh our page i can see that all the animals will still log but in addition when i click falcon now it will console log