In this video, you'll learn how to add an event listener to a parent element and let it handle events on its children.
In the last video you learn how events bubble up the DOM tree. 0:00 For example clicking a list item also triggers a click event 0:03 on the UL element containing the list item. 0:07 This is useful because we can add an event listener to a parent element and 0:09 let it handle events on its children. 0:14 For example, an event listener on an unordered list can handle the click event 0:16 for any of its children list items, even if there are hundreds of list items. 0:20 But how does the parent know which child triggered the event? 0:25 Well, when an event handler is called it receives an event 0:28 object as its first argument. 0:32 This object has some useful information about the event as well as a few methods 0:34 we can use to help us handle the event inside the handler. 0:38 So here's the MDN page for the event object, and if you scroll down 0:43 you can see the properties and methods available on this object. 0:47 Now just a note I'd stay away from anything with these yellow warning signs 0:50 which indicate these methods are not standardized. 0:55 So in other words they are experimental and may or 0:57 may not become supported in the long term. 1:00 Now the property you'll probably use most often is target 1:02 which is a reference to the element that first received the event. 1:06 For example, if you click on a list item, 1:10 target would contain a reference to that list item. 1:12 So let's have a look at this property in action, 1:15 first I'll switch over to our code and comment out the handlers we wrote earlier. 1:18 And just about every text editor has a shortcut key to do this. 1:24 So with the code selected in Workspaces you can hit Cmd+/ on a Mac, or 1:27 Ctrl+/ in Windows to do this. 1:32 Commenting this code will allow us to prevent it from running while we try 1:34 a little experiment, 1:38 then when we're done we can uncomment it to make the code active again. 1:39 So first let's add a temporary click handler to the document object. 1:42 And inside we'll say, console.log, and now let's put in an event parameter so 2:00 our callback function can use the event object. 2:06 And inside the handler we'll log out the target element with 2:12 console.log(event.target). 2:16 So now when any element on the page is clicked, 2:22 a reference to that element will be logged to the console thanks to all the click 2:25 events bubbling up through the DOM tree to the document object. 2:29 So let's save the file, switch over to the browser, and try it out. 2:33 When you click on the Remove last item button that element is logged 2:39 out to the console. 2:44 And we can verify that this is the item by hovering over it in the console and 2:45 you see the button highlighted. 2:49 Now if you click on the paragraph above the list or on a list item. 2:52 You'll see how the event object is giving us a reference to the individual elements 2:58 we click on. 3:02 So now let's go back to app.js and delete this example handler and 3:05 we can now uncomment the code we want to fix. 3:11 Remember these two handlers are attached to the containing div, but they 3:16 need to access the element triggering the event to make the changes to that element. 3:21 So can you see how to use the event object we just learned about here 3:26 to fix these two event handlers? 3:29 I'll give you a tip, you'll need to add some extra code 3:32 to ensure the behavior is only run for list item elements. 3:35 You can get any element's tag name from the tagName property which I'm just 3:38 including here to show you that the N is capitalized. 3:43 And you can read more about tagName at MDN which is linked in the teacher's notes. 3:47 Go ahead and pause this video and 3:51 see if you can figure out how to add the desired behavior to the list items. 3:53 All right, so now I'll show you my solution. 3:59 Now, the first thing to do is add in the event parameter, so 4:02 the event object will be available inside the handlers. 4:06 Then we need to get the specific element that is triggering the event. 4:13 We can use the target property on the event object for this. 4:17 So I'll replace lisItems[i] with the event.target reference, 4:21 I'll go ahead and copy it and replace the others. 4:29 But there's still a problem. 4:38 You see, these handlers will fire for any of the elements inside the div as well 4:39 as for the div itself and we only want this behavior to effect list items only. 4:45 So let's add an if statement to each handler that will only allow list 4:51 items to have this behavior. 4:55 As I mentioned earlier, we can get the tag name from from the tagName property. 5:06 So in the condition I'll write event.target.tagName. 5:12 And the tagName property returns a tag name in all caps, so I'll capitalize LI. 5:20 So if this is a list item we want the line in this statement to run, 5:27 and I'll do the same with the second handler. 5:33 So I just go ahead and copy this if statement, paste in my second 5:35 handler, And we're all set. 5:40 So now this code will only run for list elements. 5:48 Let's go ahead and save and switch over to the browser to see this in action. 5:52 Hovering over the list elements we can see 5:56 the behavior is exactly the same as before. 5:59 The difference is there are only two handlers on the containing 6:03 div instead of eight or so handlers on each list item. 6:06 Even better, watch what happens when I remove plums, then re-add it. 6:09 Nice, the new list item still has the behavior attached to it. 6:17 You've learned a lot so far, you've learned what events are and 6:22 how to handle them with event listeners. 6:25 You've learned about event bubbling and 6:28 how to access the event object to handle events intelligently. 6:30 You've really learned the basics of making web pages interactive. 6:33 So, well done. 6:36 We're in the homestretch now and the next set of videos will add to your knowledge 6:38 about how to get references to elements in the DOM. 6:41 I'll see you there. 6:43
You need to sign up for Treehouse in order to download course files.Sign up