All right. Now one more thing I want to show you is, I mentioned that events bubble up, and so parents can handle events of their children. So let's take a look at that as well. Let's do something with the UL tag right here. We're going to do something with that element. We are going to have it handle the events for each of the Li tags.

Okay. So first let's select that element, query selector and that ul element is inside an article tag. So that should be that should define the path close enough to get the right one. And while with this HTML page, there is only one ul element anyway, so that's more precise than we need to be. Alright, so I have the UL node. Now let's go ahead and add an event listener to it.

This time, let's use a different event. Let's use double click. And that's defined by DBL. Click. Then we put a comma. Now the code we want to execute.

Before I enter this code, I want to give you a reminder, remember that the children of ul also has what we call text nodes. So for example, when we typed in ul code, there was a return right here, and then we typed in the Li tag. Well, that return becomes a text node. There's really no return at the end of this. That's becomes a text node as well. So the child nodes of ul are these three tags, but it also includes text nodes.

So we need to have some way to separate what we're going to do with those Li tags. So the idea is here that the UL node will listen for the double click event, then I'm going to have it do something to its children. But I only want to do it to the Li tags, not to the text nodes, they're a part of its children. So here's what I'm going to do function clared anonymous function curly braces. And then I'm simply going to check if you l dot child nodes. Now we need something to reference the child nodes because remember, child nodes returns an array of nodes.

So let me create one more variable Pull up here. We're going to call it click CMT for count, and let's set it equal to zero to start with. So let's put that in here. Not only are we learning about our event listeners, but we're using some of the JavaScript that we've learned in past videos as well. Now I want to check node type. I need that right next to the square bracket.

Because that's all part of the if statement. So I want to check node type and see if it's equal to one. If it's equal to one remember, then it's a regular elements. And so then we will go ahead and change that child node. And we'll just change the color. We'll set it equal to green.

Now, before we go any farther, let me save this. And let's go ahead and refresh this page and see what happens. Double click, double click, double click, it's not changing to green. So what's going on? Well, let's come back and look at this. Well click count starts equal to zero.

So it's only going to check the first child and that's all click count never increments. So let's increment it. Now we'll increment whether no type is equal to one or not. Because if it's not equal to one, we want it to go to the next number to grab the next Child. If it is equal to one, we want it to go to the next number to grab the next child as well. So let's try that now.

Save it, refresh, double click, nothing happens. Double click on changes to green, double click, nothing happens. Double click, the next one changes is green. See I'm clicking on this item here, but it changed this one down here because the parent is grabbing the event. The parent is listening for that event. And then the parent the code inside of that event listener is dealing with all of the children.

I can now double click again, double click again and the third one changes. Alright, let's enhance our code just a bit. We have to double click twice in order for it to change the color on the notes that we want to change, but we could correct that We could use a simple while loop and have it cycle through the click count until it finds a node that we can change. So wild ul dot child nodes. Click count.no type is not equal to one. So while it's not equal to one, we're going to simply increment the count.

So by doing that, then eventually we'll find one that is equal to one. Now another thing we should probably test here is click count is less than ul dot child nodes. We don't want it to go beyond the number of child nodes or we'll get in there. Now, that should change a color to green right away when we do a double click. However, this if statement is probably no longer necessary, because this while loop is making sure that we have one that has a known type of one. But I should change this if statement because when we get greater than the length, click counts going to be greater than the number of children that is in URL, this will still execute.

And so it'll try to change the color of something that does not exist. So using truthy and falsy, we can just change the if statement to this. This will check to see if this exists. If it does, it goes ahead and changes the color to green. If not, it doesn't try to change the color. So save it.

Refresh. Now when we double click Something didn't work. Let's check our console. Sure enough, we got an error cannot set property color of undefined. So let's go back and look at our code. What did we do wrong?

Now, I'm not sure why we're getting the error we are getting, but I do see that this is a problem here. I left off the dot for child nodes dot length. Let's see if that corrects it. Sure enough, because there was that problem in the JavaScript, it generated an error. However, sometimes it doesn't indicate the exact location where the problem occurred. So you have to look through your code, find the problem, and then fix it.

It looks like it's working. now. I'll double click again. Double click again. Now it does it right away. Alright, let me jump back to sublime.

One more thing I'd like to show you now. This is a a different type of event listener than we've done in the past. As you can see right now, I'm just calling a net when this JavaScript file loads. Now, we talked in a previous video that if this script file, were up here in the head tag, we would have a problem. Let's go ahead and take a look at that. Do any of our event listeners work?

Doesn't look like if we display the console cannot read property add event listener have no. So why are we getting that error? Well, if you remember, here's our first add eventlistener. Well, it says of No. So what it's saying is this doesn't exist. It's not able to find this because the h2 element hasn't even been drawn in the HTML page when this JavaScript file loads.

So this doesn't exist yet. So that's why they doesn't work. Instead of just calling a nit right away, we can use an event to determine when the page loads and then call the init function. So, we would do this by attaching any event listener to the window object, window dot add event listener, and the event is load. And then we'll call a knit. Now, this also illustrates that I can define a function and then call it by simply referencing that function.

I don't put the parentheses after it because that would cause the function to execute right away. I simply include the reference to the function. So window dot add eventlistener load in it. Let's see how that works. Now let's see if our events work. Sure enough, they work So that's another type of event listener that we can add to the window object.

And that can be used to determine if the page is loaded before we try executing any code that has to deal with the DOM. So we looked at a couple of methods for doing that we put the code file at the very end. Or we can listen for when the page loads. Alright, let's move on to the next topic.