Welcome in this lesson, we're going to be looking at mouse events and mouse events are always fun where
we look at mouse over, mouse out and there's a whole bunch of different mouse events that we can track.
So the first four mouse events, there's mouse over this is event that's fired.
One eye pointing devices moved onto the element that has the listener attached onto it or one of the
children.
So you can see here and the example on the right hand side that we're listening, we're adding an event
listener.
So the same way as we were adding the click events, we add the event listener and we've got mouse over.
So this is anytime the mouse is over.
So it's taking the mouse position into consideration.
And any element that it's over, it fires off the vent and then mouse out is the opposite.
So it's a vent that's fired when the pointing device is moved off, the element that has the listener
attached to it.
So when we open up module developer network, they've got some examples of this where they've added
to the element test the mouse enter.
So whenever the mouse enters, it updates the event target style color to purple so the text will turn
purple any time were over this unordered list and there's also a time out.
So they've added in a timeout that will, after five hundred milliseconds, will update the color and
reset it back to its original color.
So it'll only be purple for the time when it's on top of that particular element.
And there's also have mouse over as well.
So mouse enter, mouse over and there is a slight difference.
So mouse enter is executed only when the mouse enters the element, whereas mouse over executes every
time the mouse has moved and the cursor is over the element.
So depends on what you're trying to achieve.
And typically I usually use mouse over and then mouse out to detect when the element is left and you
can use combinations of either one of these and the same thing as when the mouse over.
They've got a time out here that resets the color.
So when mouse is over, it's going to be orange.
And when we leave, it's going to reset the color back to the original color.
There's also one for the mouse out of that.
And the mouse out event is very similar to mouse leave.
So this gets executed once the cursor moves out and mouse out will be executed every time the cursor
is moved off the different list.
So this one gets moved off the unordered list and then the list items are for mozote.
So there is a difference here between the mouse over and mouse out and the mouse leave in the mouse
enter.
So those are three different or four different types of mouse events can see there's quite a bit more
as well.
So you've got all of these different options and the click events are mouse events as well, because
it's your mouse that's doing the clicking and there's also the double click.
And we've already gone over a quick click quite extensively.
There's also mouse up and mouse down as well.
So whenever the mouse is down, so whenever the pointing device button is pressed on an element that
will invoke this particular function.
So there are some options and depending on the situation, you can make use of the different ones.
So in this example, what I'm going to show you is how we can set the mouse over and the mouse out on
elements.
So within our unordered list where we can listen for the different events, the mouse events, and then
update adding in classes and removing classes depending on where we are.
And we're going to loop through all the list items within the list.
So let's open up the editor and we're going to select the list items that we have.
And we do have some list items here.
So let's first get our list items.
We'll call it lists and using the document.
And we've got to select all of them, so I'm going to use query selector all selecting all the elements
that are list items and just refresh it just to make sure that I do have the proper node list.
So I have all seven of them within the node list and we're going to use a for loop to loop through looping
through while FS length is less than and we need to increment X and then within the loop we're going
to add that listeners to all the elements so you can list out the elements by doing a console log and
list alias X as the index.
So that will list out all the different elements that we have.
So now whenever we hover over them, we want to add in the most advance.
So taking the list element, adding an event listener and then adding in mouseover, we're going to
invoke an anonymous function.
So whenever Mouse is over, we're going to select the current active element selected class list and
add the class of red so only have that one class.
So that's why I keep using that one.
And of course, you probably have a little bit more variety within your projects.
Also within the list item, we're adding another event listener and this event listener is listening
for Mozote because these are two separate events.
So we're tracking them as separate events.
And whenever this event occurs, we want to remove the class of red.
So think we're ready to try it.
So you can see that whenever I hover over those elements, they're lighting up red and we can even add
even more into it where we can update the style and background color if we wanted to.
So to make it stands out a little bit more, we'll turn it yellow and then we'll set the background
color to blank when we do mozote so you can see them.
They're getting highlighted as we hover over.
So there is, of course, a challenge for this lesson.
And the challenge is to do just what I just did to highlight the elements within the list and turn the
text color red when the mouse is over the list item and remove the highlight once it's off and you can
use the content below where you can use the default HTML file that we've been using earlier.
So go ahead and try this out for yourself and I'll do a quick run through of the solution for you.
So the code was actually the solution code was actually exactly what we had run through.
Although we're updating and removing classes, you can also update and remove the background color if
you don't have the class with the appropriate red color.
So we could have done background or you could have done color red and updated that as well.
So that's what I'm going to add in here.
So in case we don't have the class, we can select the element using style and then color and we'll
set the color to be red.
And you can also use the elements object.
So this is going to be referring to the same one as the instance.
So it doesn't matter what which one you use, however you access that you can use this or you can use
the object.
It's referring to the same instance.
And then whenever we move off of it, we want to just reset it back to black or whatever the default
color is.
So now we've got the same effect and just a different way of writing it.
So whatever way you wrote it, as long as you've got the right effect, then you have the correct solution
and you can also fire this on mouse enter.
And it looked at roughly the same way and it gets invoked when wherever we're entering.
And then there's mouse out and there's also no sleeves.
So there are subtle differences as described.
But in this case, it looks roughly the same thing.
It looks like it's doing roughly the same thing.
So coming up next, we do have a challenge for you and that's going back to those list items.
So there's a more advanced challenge coming up in the next lesson.