In what we've dealt with so far with events, we have yet to talk about the event object. Every time an event fires, an event object is passed to the handler function. And we can if we choose to capture that event object, and that can provide additional information to us about the event, which sometimes is useful. Now, how would we capture that event object? Well, it's simple. Looking at the example we used in the previous video.

Here's our two step process. We capture the node from the dome, replace it in a variable and then when we add an event listener, and define the function, we simply include a variable inside the parentheses and the event object will be placed into that variable so that we will be able to reference it. Usually that variable is an E or event is sometimes used. And then we can use that event object if needed. Let's open sublime and jump to the example that we were using in the previous video, where we had several event listeners. And let's first capture the event object for the click event.

So to do that, I'm simply going to enter event. Place a parameter in that function that will capture the event. Now the first thing I want to do is I just want to display to you what's available in the event objects. I'm going to do that by doing a console dot dir on the event object, let's go ahead and save that. Let's jump out to that page. refresh it.

I'm going to click on the H two that will cause it to find And passing that event object. Now I'll open up the console. And we can see that it has displayed the event object. And we're able to open it up and take a look at the properties that are associated with that event object. Notice that the top first property is the Alt key and that set defaults. Well, that's simply telling us whether the Alt key was held at the same time the button was clicked.

So it's that kind of information that we can gather from the event object, we can also determine the position of the mouse based upon information. We also have down here a little bit a target, the target tells us which object received the event. We have a current target as well. And those can be useful. In fact, let's look at a situation where that might be useful. I'm going to jump Back to sublime.

And I'm going to go down now to the event listener that we added to the UL tag. And I'm going to console log, the event target and the whoops the event current target. So we can take a look at the difference between those two. I'm gonna go ahead and save that. Refresh the page, double click on one of these, and I'll open up the console. So the target is the Li tag that I clicked on or double clicked on.

The current target is actually the object where the event listener is located, where it is attached, and so that is the UL tag. So knowing the difference Between that that can be helpful. So let's go back to sublime. Now I can make a modification here, I'm going to comment out that code. And I will simply use the target to change the color. Notice that I didn't put the event variable in here.

Well, because I used event it was smart enough to know that I was grabbing the event object. If I would have used a different variable, like E, I would need to then grab that. So I'm going to enter e dot target dot style dot color equals green. Now this will cause the one that I double click to turn green. So a bit different than what we were doing before but it illustrates how we can use the event object at times and jump back out Refresh, double click. Now if I double click on that again, and again, it will just keep making that one green.

If I want another one green, I need to double click on the one I want green. So the event object can be useful in certain situations. And if you need it, then you would capture it and then access the properties or methods that you need. Let's move on to the next topic.