Understanding event propagation - JavaScript Tutorial

One important concept you need to understand when working with events is something called Event propagation. Event propagation lets you have a single element capture all the events of its children elements. Event propagation is the reason you want to use the newer addEventListener model although that model is not compatible with older versions of IE. So let's say that you have a group of images that you've coded as a list of elements, and you want to do something when a user clicks on any one of these images. In the older model you would have to create an event listener for each item on the list. So this is kind of what I've done here, I have added an ID of pink to this item, and I'm listening only to events happening inside this pink element. So within that propagation, I can check for any events happening inside my unordered list. So what I'm going to do is, delete this IDof pink here. And I'm going to add an id, upgrade to my unordered list. And then I will get that element. An app of the event to the console, so I'm going to save these, and go back into my page, and I'll refresh, and I'll click on any of these elements. Now, it looks like the same event came back. But notice that there's an item called toElement and right now it says IMG. If we open this event, we can see that the information tells us. Inside this toElement, we can see the information for anything inside that element, so we know that we've click on this pink item right here. And if we click again on a separate element. So, I'll click on this green one right here and I open the event. We can see that the two element now is pointing to the yellow-green square. So we can actually modify our code to just go ahead and output that. And I'll refresh my page. And I'll click on one of these. And it gives us the name of the item that we clicked on. So instead of having to add a lot of different event listeners, I was able to do the same thing with just one event listener. Now that sounds great but there's a little bit of a dark side to event propagation and that is that different browsers support different propagation models. The order the browsers capture the event, is important because it can catch event in one of two ways. When the click happens it can move down the dom and notice or register that the click happened inside the UL first, then on the LI and finally on the IMG. This is called catching an event in the capturing phase. The other way to register the event is by having the browser notice the event first on the lowest element. In our example, the IMG and then passing the event up the dom chain until it reaches the UL. This is called catching an event in the bubbling phase, because the event bubbles from the LI to the UL. So let me show you how this happens. Now I mentioned before there's an additional item right here called false, and that controls the propagation type whether you're capturing an event in the bubbling phase or the capturing phase. So this doesn't really make any sense, unless you're trying to capture it to a different even. So let's go ahead and add the ID back here. And we'll add the ID of pink. And we'll go ahead and set two different event listeners. One for the unordered list, and one for the pink element. So, I'm going to change my console.log Command to just tell me that it clicks somewhere inside the UL. If it's right here. So, clicked inside the unordered list. And if I click on the pink element, it's actually going to show me that I clicked on the pink element, because it will show me the out parameter right here. So I'm going to save this, and I'll go back here. And I'll refresh my page and I'm going to click right here, and it tells me that I clicked inside the UL, click right here. And it tells me that it did it again, notice that there's a 2 right here. I click here, it's going to tell me, pink first and then that I click inside the UL. It's actually telling me to click. It says that I first clicked on the item right here, which is the pink item and then, now I also happened to click inside the UL. It's actually registering both of those events. If I change both of these to true. And I go back into my document. I'm going to refresh and show you that if I click on this pink item, its going to first register the click on the UL and then on the pink element. All these others will just register the UL but not these one. This one will first register pink and then UL. So reality, it doesn't really matter that much how the event move through the dam, except that, some browsers like IE support only events that bubble. Some other browsers support events that capture, and some browsers like chrome will support events that bubble or capture. Now here's a good website to go to if you're interested in digging into compatibility in issues and bubbling versus capturing a little bit deeper.