1
00:00:00,300 --> 00:00:05,280
Welcome in this lesson, we're going to be looking at mouse events and mouse events are always fun where

2
00:00:05,280 --> 00:00:10,450
we look at mouse over, mouse out and there's a whole bunch of different mouse events that we can track.

3
00:00:10,950 --> 00:00:15,120
So the first four mouse events, there's mouse over this is event that's fired.

4
00:00:15,120 --> 00:00:22,110
One eye pointing devices moved onto the element that has the listener attached onto it or one of the

5
00:00:22,110 --> 00:00:22,590
children.

6
00:00:22,830 --> 00:00:27,840
So you can see here and the example on the right hand side that we're listening, we're adding an event

7
00:00:27,840 --> 00:00:28,200
listener.

8
00:00:28,200 --> 00:00:33,140
So the same way as we were adding the click events, we add the event listener and we've got mouse over.

9
00:00:33,450 --> 00:00:36,770
So this is anytime the mouse is over.

10
00:00:36,780 --> 00:00:39,240
So it's taking the mouse position into consideration.

11
00:00:39,510 --> 00:00:44,570
And any element that it's over, it fires off the vent and then mouse out is the opposite.

12
00:00:44,580 --> 00:00:50,730
So it's a vent that's fired when the pointing device is moved off, the element that has the listener

13
00:00:50,820 --> 00:00:51,710
attached to it.

14
00:00:52,110 --> 00:00:58,110
So when we open up module developer network, they've got some examples of this where they've added

15
00:00:58,290 --> 00:01:01,620
to the element test the mouse enter.

16
00:01:01,720 --> 00:01:08,940
So whenever the mouse enters, it updates the event target style color to purple so the text will turn

17
00:01:08,940 --> 00:01:14,040
purple any time were over this unordered list and there's also a time out.

18
00:01:14,250 --> 00:01:20,760
So they've added in a timeout that will, after five hundred milliseconds, will update the color and

19
00:01:20,760 --> 00:01:22,770
reset it back to its original color.

20
00:01:22,980 --> 00:01:28,830
So it'll only be purple for the time when it's on top of that particular element.

21
00:01:29,040 --> 00:01:31,800
And there's also have mouse over as well.

22
00:01:32,130 --> 00:01:36,210
So mouse enter, mouse over and there is a slight difference.

23
00:01:36,210 --> 00:01:44,730
So mouse enter is executed only when the mouse enters the element, whereas mouse over executes every

24
00:01:44,730 --> 00:01:48,840
time the mouse has moved and the cursor is over the element.

25
00:01:49,170 --> 00:01:51,270
So depends on what you're trying to achieve.

26
00:01:51,420 --> 00:01:59,520
And typically I usually use mouse over and then mouse out to detect when the element is left and you

27
00:01:59,520 --> 00:02:04,950
can use combinations of either one of these and the same thing as when the mouse over.

28
00:02:04,950 --> 00:02:07,470
They've got a time out here that resets the color.

29
00:02:07,650 --> 00:02:10,710
So when mouse is over, it's going to be orange.

30
00:02:10,710 --> 00:02:14,580
And when we leave, it's going to reset the color back to the original color.

31
00:02:14,940 --> 00:02:18,750
There's also one for the mouse out of that.

32
00:02:19,170 --> 00:02:22,800
And the mouse out event is very similar to mouse leave.

33
00:02:22,980 --> 00:02:30,360
So this gets executed once the cursor moves out and mouse out will be executed every time the cursor

34
00:02:30,360 --> 00:02:32,540
is moved off the different list.

35
00:02:32,790 --> 00:02:38,550
So this one gets moved off the unordered list and then the list items are for mozote.

36
00:02:38,670 --> 00:02:44,180
So there is a difference here between the mouse over and mouse out and the mouse leave in the mouse

37
00:02:44,190 --> 00:02:44,640
enter.

38
00:02:44,670 --> 00:02:49,560
So those are three different or four different types of mouse events can see there's quite a bit more

39
00:02:49,560 --> 00:02:50,070
as well.

40
00:02:51,110 --> 00:02:55,430
So you've got all of these different options and the click events are mouse events as well, because

41
00:02:55,430 --> 00:02:58,390
it's your mouse that's doing the clicking and there's also the double click.

42
00:02:58,700 --> 00:03:01,720
And we've already gone over a quick click quite extensively.

43
00:03:01,760 --> 00:03:04,810
There's also mouse up and mouse down as well.

44
00:03:05,090 --> 00:03:11,660
So whenever the mouse is down, so whenever the pointing device button is pressed on an element that

45
00:03:11,660 --> 00:03:13,490
will invoke this particular function.

46
00:03:13,700 --> 00:03:18,600
So there are some options and depending on the situation, you can make use of the different ones.

47
00:03:18,860 --> 00:03:25,550
So in this example, what I'm going to show you is how we can set the mouse over and the mouse out on

48
00:03:25,550 --> 00:03:26,150
elements.

49
00:03:26,150 --> 00:03:31,910
So within our unordered list where we can listen for the different events, the mouse events, and then

50
00:03:31,910 --> 00:03:37,100
update adding in classes and removing classes depending on where we are.

51
00:03:37,310 --> 00:03:40,630
And we're going to loop through all the list items within the list.

52
00:03:40,640 --> 00:03:44,330
So let's open up the editor and we're going to select the list items that we have.

53
00:03:44,630 --> 00:03:46,860
And we do have some list items here.

54
00:03:46,870 --> 00:03:49,790
So let's first get our list items.

55
00:03:49,790 --> 00:03:53,210
We'll call it lists and using the document.

56
00:03:54,260 --> 00:03:59,870
And we've got to select all of them, so I'm going to use query selector all selecting all the elements

57
00:03:59,870 --> 00:04:05,210
that are list items and just refresh it just to make sure that I do have the proper node list.

58
00:04:05,420 --> 00:04:11,750
So I have all seven of them within the node list and we're going to use a for loop to loop through looping

59
00:04:11,750 --> 00:04:18,830
through while FS length is less than and we need to increment X and then within the loop we're going

60
00:04:18,830 --> 00:04:25,760
to add that listeners to all the elements so you can list out the elements by doing a console log and

61
00:04:25,760 --> 00:04:28,940
list alias X as the index.

62
00:04:29,150 --> 00:04:31,540
So that will list out all the different elements that we have.

63
00:04:31,580 --> 00:04:35,450
So now whenever we hover over them, we want to add in the most advance.

64
00:04:36,320 --> 00:04:43,220
So taking the list element, adding an event listener and then adding in mouseover, we're going to

65
00:04:43,220 --> 00:04:44,710
invoke an anonymous function.

66
00:04:44,990 --> 00:04:51,740
So whenever Mouse is over, we're going to select the current active element selected class list and

67
00:04:51,740 --> 00:04:54,620
add the class of red so only have that one class.

68
00:04:54,620 --> 00:04:55,830
So that's why I keep using that one.

69
00:04:56,090 --> 00:04:59,090
And of course, you probably have a little bit more variety within your projects.

70
00:04:59,120 --> 00:05:04,820
Also within the list item, we're adding another event listener and this event listener is listening

71
00:05:04,820 --> 00:05:06,980
for Mozote because these are two separate events.

72
00:05:06,980 --> 00:05:09,230
So we're tracking them as separate events.

73
00:05:09,230 --> 00:05:14,300
And whenever this event occurs, we want to remove the class of red.

74
00:05:14,330 --> 00:05:15,470
So think we're ready to try it.

75
00:05:15,590 --> 00:05:21,530
So you can see that whenever I hover over those elements, they're lighting up red and we can even add

76
00:05:21,530 --> 00:05:28,000
even more into it where we can update the style and background color if we wanted to.

77
00:05:28,430 --> 00:05:33,290
So to make it stands out a little bit more, we'll turn it yellow and then we'll set the background

78
00:05:33,290 --> 00:05:37,010
color to blank when we do mozote so you can see them.

79
00:05:37,010 --> 00:05:38,800
They're getting highlighted as we hover over.

80
00:05:39,110 --> 00:05:42,350
So there is, of course, a challenge for this lesson.

81
00:05:42,770 --> 00:05:50,180
And the challenge is to do just what I just did to highlight the elements within the list and turn the

82
00:05:50,180 --> 00:05:57,080
text color red when the mouse is over the list item and remove the highlight once it's off and you can

83
00:05:57,080 --> 00:06:01,670
use the content below where you can use the default HTML file that we've been using earlier.

84
00:06:01,790 --> 00:06:06,380
So go ahead and try this out for yourself and I'll do a quick run through of the solution for you.

85
00:06:06,410 --> 00:06:10,430
So the code was actually the solution code was actually exactly what we had run through.

86
00:06:10,790 --> 00:06:17,360
Although we're updating and removing classes, you can also update and remove the background color if

87
00:06:17,360 --> 00:06:20,120
you don't have the class with the appropriate red color.

88
00:06:20,120 --> 00:06:25,400
So we could have done background or you could have done color red and updated that as well.

89
00:06:25,550 --> 00:06:27,190
So that's what I'm going to add in here.

90
00:06:27,200 --> 00:06:35,270
So in case we don't have the class, we can select the element using style and then color and we'll

91
00:06:35,270 --> 00:06:36,710
set the color to be red.

92
00:06:37,040 --> 00:06:40,400
And you can also use the elements object.

93
00:06:40,410 --> 00:06:43,700
So this is going to be referring to the same one as the instance.

94
00:06:44,270 --> 00:06:50,240
So it doesn't matter what which one you use, however you access that you can use this or you can use

95
00:06:50,240 --> 00:06:51,110
the object.

96
00:06:51,440 --> 00:06:53,300
It's referring to the same instance.

97
00:06:53,300 --> 00:06:58,760
And then whenever we move off of it, we want to just reset it back to black or whatever the default

98
00:06:58,760 --> 00:06:59,320
color is.

99
00:06:59,990 --> 00:07:03,140
So now we've got the same effect and just a different way of writing it.

100
00:07:03,560 --> 00:07:09,830
So whatever way you wrote it, as long as you've got the right effect, then you have the correct solution

101
00:07:09,830 --> 00:07:12,980
and you can also fire this on mouse enter.

102
00:07:12,980 --> 00:07:17,720
And it looked at roughly the same way and it gets invoked when wherever we're entering.

103
00:07:17,810 --> 00:07:20,570
And then there's mouse out and there's also no sleeves.

104
00:07:20,570 --> 00:07:23,120
So there are subtle differences as described.

105
00:07:23,360 --> 00:07:26,000
But in this case, it looks roughly the same thing.

106
00:07:26,000 --> 00:07:27,620
It looks like it's doing roughly the same thing.

107
00:07:27,770 --> 00:07:33,710
So coming up next, we do have a challenge for you and that's going back to those list items.

108
00:07:33,920 --> 00:07:36,650
So there's a more advanced challenge coming up in the next lesson.