Let's apply what we learned in the previous video with an event example. So let me open up sublime. We're going to use this HTML page right here. Let me just display it to use so you know what we're working with. Very simple HTML page. But we're going to create several event handlers on this HTML page to do a bunch of different things.

Not necessarily practical things, but some fun things that introduce you to event handlers. So I'm going to jump back and open my JavaScript file. And to start off, I'm going to create a function called in net. This is initialized function for this page. So when this function runs, it's going to set up the event handlers that I want on this particular page. So down here, I will call it.

Now let's first do something with the H two. This is our, this is an h2. Heading here learn modern JavaScript getting started. So let's do something with that first. So we're going to create a variable. I'm gonna call it h, h2, and set that equal to document dot query selector.

And then inside of parentheses, quote, h2. There's only one h2 on this HTML page, and even if there were more than one h2 and grab the first one, since we're using query selector, whoops, I forgot why. Let's add that in. Now, we have our node, we can add any event listener to it. So h2o dot add event listener. And then inside of quotes, there's two parameters.

First is the event click is what we're going to use. And I'm going to define an anonymous function semicolon at the end of that. Now, here's the code we want to do, we're going to make a simple change, I'm simply going to change the color of that h2 to red. So when we click on it, it will change to red. So h2 dot style dot color equals red.in quotes, semi colon. All right, let's go ahead and save that.

Let's jump out and refresh the page. And if I come and click on the h2, nothing happens. Let's take a look at the content So we'll see if we have an error. Sure enough, we have an error, the code is causing an error. It looks like I misspelled document. All right there.

It's a little fix that, save it. And we'll try again. Click on the h2, and it turns to red. Therefore, our first handler work for us. Now, in this particular handler, I repeated the h2 to specify what color we could change. Well, this also could have been this.

In this context, inside of this event listener, this refers to the node that the event listener is attached to. So let me just save this and refresh it. Show that again. Sure enough. All right, let's do another one, a different event this time as well. So I'm going to grab, there's an image on this page, I'm going to grab that image, I'm going to place that into a variable.

Img. See if I can spell document right this time query selector. And there's probably only a single image, so it's probably not difficult to grab, but it's inside a div with an ID of logo. So I'm going to be as specific as possible. So I'm going to put logo, IMG and that will grab that image element for us. So we have that node.

Now let's go ahead add an event listener. And this time we're going to use a different event. This is mouse Over. So mouse over event occurs when the cursor simply passes over that element. So comma, and then the second parameter is the code we want to execute. So I'm going to define anonymous function, but some semicolon at the end of this.

Now let's go ahead and set up our code. And let's do this. Let's just change that source of the image. So IMG dot SRC, or we could do this SRC equals, here's my lips. Here's my new image. All things JavaScript logo.

And that's all we'll do. Go ahead and save that refresh. pass over it. Sure enough, the logo changes and the other listeners still working as well. Now I want to, to illustrate that we can add more than one event listener to a single node for the same event. So I'm going to create a second event listener for IMG.

Now I could just as easily do this in the exact same code, add one more line here and do what I'm going to do. However, I want to illustrate that we can add more than one event listener for the same event. Because it's possible this you could be adding another event listener somewhere else in your code. So same event, mouse over, and then another anonymous function and this time let's change the width Let's be very big. put a semicolon down here. Now, when you have more than one event listeners for a single event, the order that they are placed in your code determines the order of which they will execute.

So when mouse over occurs, this event listener will happen first, then this one. Now, it may take a split second for this image to load. And so it may look like this event listener happens first, I'm just going to reverse the so it's a little easier to see. But that eventlistener up above, so we'll change the width first, then we'll load the new image. Gonna go ahead and save that refresh. Mouse over.

You see it get large really quick. That might have been difficult to see in the movie. But he gets large, really quick and immediately changes to the image. Right now, just for fun, let's make another change. So you're able to see that we could have more than one event listener for the same event on the same node. Well, let me get rid of this event listener.

So I'm going to comment that out. That can be done with Command Option slash, or on Windows Ctrl, Shift slash. So I'm going to comment that out. Now let's do something that will allow us to see this change. happen let's put a second between when it changes the image. So we can do that with a set timeout.

Remember, we learned that in a previous video, set timeout has two parameters. One is The code that we're going to execute, and I'm going to define an anonymous function for that. And I'm going to say IMG, SRC equal to, and then we're going to use the name of the load the name of the other image. Now the second parameter, so at the end of that anonymous function, I'm gonna put a comma, and then put in the second parameter, which is the number of milliseconds to wait. Before it executes, then I'll put a semicolon at the end of that. Okay, so now we'll be able to see the width change, and then a second later, the image will change.

Refresh this mouse over. There we go. And our other handler is still working as well. We will continue with this example in the next video.