Events are an exciting part to get into JavaScript up to this point, our JavaScript has been executing whenever the HTML page loaded and then the JavaScript file that was attached to it loaded or we would enter something in the console and press return and then it would execute. Well, that's a little bit limiting. Events allow us to execute JavaScript based upon things that the user does. So we can respond to the user as they interact with the web page. So let's take a look at events. Now first off, events are happening all the time on a web page.

For example, when the the mouse cursor hovers over something that's an event when you click something that's an event when you scroll, when you press a key on the keyboard when an image loads online, Have these are events. And so they're happening constantly on a web page, we can choose to respond to them if we want to, meaning have some code execute when that event occurs, or we can choose not to respond to any of them. The way we respond to an event is by creating an event handler. When we set up an event handler, we specify what event we want to respond to. And we specify what JavaScript code we want to execute. So there's a two step process to handle events.

One is you first need to select the node from the DOM. So you need to find that element that you're going to listen for events on. Second you attach what's called an event listener. Now, event listener simply is attached to that node and then it lists For the event, which you indicate, and when that event occurs, then it goes ahead and executes the code, which you also indicate. So two step process, get the node you're attaching the event listener to, and then attach the event listener. Now you can attach more than one listener to a node.

That's very important because if you attach one listener at a certain point in your code, and then later, attach another listener, it doesn't override the first listener. And finally, parent nodes can listen to child node events. So if you attach a listener to a parent, it could be triggered by an event that happens on a child. So the events bubble up. If you think of the DOM as a hierarchy, then events that occur on lower nodes bubble up to the higher nodes. That can be a very powerful concept.

For how you implement your event handlers. Alright, let's look at the actual code that is used to define an event handler. So first off, I said you need to select the node. So we've been doing this a lot already. So in this statement, declared a variable called a button, and then use document query selector and then searched for an element on HTML page that has an ID of button ID. So there I have the node selected, then I can go ahead and attach an event listener to that node.

So I do that with the Add event listener, function button dot add event listener, and then it takes two parameters. The first parameter is the event that I want to respond to. Now as I said, there are numerous events, one of which is click that simply clicking the mouse button. But there are a bunch of other events that we could use. Then we have a comma, then we have the second part of the Add event listener, which is, in this case, an anonymous function, I've declared a function. And inside the curly braces, I enter the code that I want to execute.

Now, if we had declared the function earlier, I could simply enter the reference to the function here, instead of defining an anonymous function, situations where I might do that is if I had some code that I want to execute from more than one event listener, or I wanted to execute somewhere else in my code. And so instead of repeating that same code with each event listener, I would define the function and then I would Just reference it in the event listener. But if I don't need to do that, usually I will use an anonymous function to define the code that needs to execute. Now this is the most common way to create an event handler is by using the Add event listener function. However, there is another way that you may encounter and that's by attaching code to the event property for a particular node. So to illustrate that, let me open the console for just a second.

And I'm going to grab a node from the DOM using query selector. This page has an image and so I'm gonna grab that there it is. Now if I do a dir This node allows me to explore its properties. Notice as we scroll down far enough, you see a lot of on, abort on before copy on before cut onblur on Council and on click on change. These are all event properties. So I can attach code to these event properties.

Using this technique, here's the node.on Click equals function, and then I define the function. Now notice that the event property has the word on in front of it, where when we do an add event listener, it's without the option. Now, why is the Add event listener preferred? Well, when you're adding to an event property, you can only do that once we're at event listeners. As I mentioned, you can have more than one event listener for a single event and multiple event listeners on each node. Were using event property you can only have code attached to an event property once.

So this is the preferred method. So I would encourage you to use this method for creating an event handler. All right, one more concept before we conclude this video. And that's events and I ate an earlier so I IE eight and earlier, does not support add eventlistener it uses instead attach event. So how would you account for IE eight and earlier if you needed to? Well, you would use an if statement like this.

So you simply, once you have the node, you would simply create an IF conditional To check button dot add event listener, and using the truthy and falsy that we talked about because this exists as a part of this node, you know it's supported. Therefore, you can go ahead and use the Add event listener technique. Otherwise, you use the attach event technique. Notice with attach event, it uses the on as a part of the event where add event listener does not. So that's the main difference between those besides the difference in the function name. And like I said, That's only necessary if you need to worry about IE eight browsers or earlier.

Alright, let's move on to the next video, where we will look at some examples of creating event handlers.