Event Bubbling and Delegation

So far we've been able to respond to user events, but there's an interesting thing 0:00 happening behind the scenes when an event takes place. 0:04 An event received by an element doesn't stop with that one element, 0:07 that event moves to other elements, the parent and other ancestors of the element. 0:11 This is called event bubbling, now I know this sounds funny as if they 0:16 percolate like coffee, but in a sense that's exactly what's happening. 0:19 So let's take a look at the drawing of the DOM again. 0:23 Look at this li element at the bottom. 0:26 Let's say a user clicks on the list item, the list item receives the click event but 0:28 immediately after, its parent, the UL element, receives the same event. 0:33 This means that if you added a click event handler to the ul, 0:38 that event handler function would run as well. 0:41 In other words, clicking on the li is also clicking on the ul. 0:44 And it doesn't stop there. 0:47 Next, the ul's parent element, the body, receives the same event, and 0:49 the event keeps traveling until it gets to the top most element on the tree. 0:53 Likewise, if the h1 element receives an event, 0:58 that event travels to the body element and finally to the root as well. 1:01 So events rise up like bubbles through the DOM tree, 1:05 which is where that term bubble comes from. 1:07 What bubbling allows us to do is listen for events on ancestor elements, 1:10 for example, if we set a click handler on the body, 1:14 our callback will trigger whenever any of its children are clicked. 1:17 So if any of the list items, the paragraph, 1:21 or headline elements are clicked, the callback will trigger in this example. 1:23 Event bubbling might not seem immediately useful, 1:28 but in fact this will allow us to write much more powerful handlers. 1:31 For example, we can use this to replace all the handlers we're attaching to 1:34 each list item with just one pair of handlers on a parent element. 1:38 I'll show you how. 1:42 In the previous video, we wrote code to loop through other list items and 1:44 attach individual handlers to each item. 1:48 Well, with bubbling we could just do this once on an ancestor of these list items 1:52 and all events would still be caught and handled as they bubble up. 1:56 This would make our code much simpler to implement 2:00 as well as using less of the browsers memory for all those individual listeners. 2:02 And there's one more benefit, since the handlers are not bound 2:06 to individual list items, any item can be added after the listener has run and 2:10 no additional setup is required for that item events to be handled. 2:15 So let's switch back to index.html and 2:19 look at where we want to attach our behavior. 2:22 So when you're trying to decide which element to use, remember, 2:25 it has to be an ancestor of the target elements, in other words, a tag or 2:28 element that wraps around or contains the element you're interested in. 2:33 For example, setting the event listener on the headline 2:37 would do no good because it's a sibling of an ancestor, not in the direct line. 2:41 Also think about what element won't ever be removed from the DOM. 2:46 For example, the body element will almost never be removed, but for the sake 2:50 of performance it's usually best to get as close to the targets as possible. 2:56 So let's attach it to the div with the class list, which contains the whole list. 3:00 I'm going to switch back to app.js, and 3:08 up top, we already have a reference to the list div element for 3:11 our other handler that hides and unhides the list, so let's reuse it. 3:16 So first, I'll remove just the loop and this list items selection, and 3:21 unindent these handlers. 3:27 Then, I'll place each event listener on listDiv, rather than listItems[i]. 3:31 But looking at the inside of these callback functions, 3:45 there's a problem, when events fire on listDiv, 3:48 how do we know which list item is triggering the event? 3:51 The only thing we have is a reference to the entire div. 3:55 So in the next video I'll show you how to solve that problem using what's called 3:59 the event object. 4:02 See you there. 4:03