Welcome back.
Are you ready to add in most events and this is going to make our application a little bit more exciting
and of course, interactive adding in these mouse events?
So the objective of this lesson is to add a mouse event whenever we hover over that output area, whenever
our mouse enters or leaves this, we want to update the background color of output.
So adding in a mouse event on that so we can add an event listener and the mouse, that listener that
we're listening for is a mouse enter and we'll just do an anonymous function directly within the event.
Listener So whenever we mouse enter, we're going to update the output, selecting the style, values
or style attribute of that element and updating the background, color, object value.
Let's set that to blue.
So whenever the mouse enters, it should update that value to blue.
And you can see that as well.
When you do inspect, when you do the code inspector within the browser, you see that now we've added
in this color of blue.
So right now, take a look at it.
I entered it in by mistake.
So there's our output elements.
So no attributes yet, no styling attributes yet.
But when I hover over, we add the style background, color blue.
So that's the fact that we want and we also want to reset it back to white whatever we have mouse leave.
So whenever the mouse leaves that element, we're going to update that background color and we're going
to reset it back to white.
So refresh and try that out.
So now whenever we're on top, we've got a blue background and that means that we're in the active area
and we also want to track that mouse, adding in one more event, listener.
And this one is going to be for add event listener, mouse move whenever the mouse is moving, then
we want to track its position so it's horizontal and as well as its vertical position.
So it's X and Y position and we can get that information from the event object outputting it into the
console for now.
So whenever the mouse is moving, you see that we get all of this information and this is coming in
from that e from that event object.
And there's a couple variables that we want to pull out.
And those are the page X and the page Y.
So you see that this is corresponding with our position of where our mouse is located.
So this page X, page Y, there's also an X and Y as well.
So there's a number of options to get the same values.
And you can see that X and Y are the same as page X and page Y, and this is in relation to the page.
There's also in relation to the element.
So our pixel values of X and Y in relation to the element.
So those are available to us as well.
And there's also client X and client Y.
And you see those are the same as page X, Y and X and Y.
So we've got a big choice.
We can select any one that we want and use those as X and Y so we can do something like E X.
And why so consoli why and that will give us the X and Y coordinates of where the mouse is located in
real time of course.
And that is going to be invoked any time that we're over that active element and see the other event.
Listeners are still firing off.
So we're still seeing that we're updating those values.
So the next thing.
Speaking of updating and outputting is that we need to update those values of the inner Temel of the
elements.
And we saw that earlier that we've selected them as most out and that was a node list.
So we've got two nodes.
And the first one is going to be the X, the second one is the Y.
And because we only have the two, it's really easy to figure out which ones which.
So update the value of this one to be X, and the second one is going to be the value that's contained
within E Y, so we can visibly see where the coordinates are.
So now whenever we're hovering over, we see we've got those X and Y coordinates being output and I'm
actually going to move this one to the top.
So it's a little bit easier to see where our coordinates are at.
So we start out with X to 12, y 29, and then we can move it along and we can move all the way to the
end of the page.
And as mentioned, this is the page X and Y coordinates.
So it's not the relation to where the element is, where the mouse's on the element and you can track
those as well.
But for now, we're going to keep it as the page coordinates.
So go ahead and add the mouse events into your project.
So whoever you most enter, have it do something with the active area and whenever it leaves, reset
it back to what it originally was and also add in that mouse move so we can track the X and Y coordinates
of where the mouse is while it's moving over our active element.
And you can be ready to move on to the next section, next lesson, where we're going to have some more
interaction and some more fun stuff with JavaScript.
So that's coming up.