1
00:00:00,180 --> 00:00:00,810
Welcome back.

2
00:00:00,840 --> 00:00:05,340
Are you ready to add in most events and this is going to make our application a little bit more exciting

3
00:00:05,340 --> 00:00:08,880
and of course, interactive adding in these mouse events?

4
00:00:09,060 --> 00:00:15,810
So the objective of this lesson is to add a mouse event whenever we hover over that output area, whenever

5
00:00:15,810 --> 00:00:22,490
our mouse enters or leaves this, we want to update the background color of output.

6
00:00:22,710 --> 00:00:29,460
So adding in a mouse event on that so we can add an event listener and the mouse, that listener that

7
00:00:29,460 --> 00:00:35,730
we're listening for is a mouse enter and we'll just do an anonymous function directly within the event.

8
00:00:35,730 --> 00:00:43,800
Listener So whenever we mouse enter, we're going to update the output, selecting the style, values

9
00:00:43,800 --> 00:00:50,750
or style attribute of that element and updating the background, color, object value.

10
00:00:51,000 --> 00:00:52,730
Let's set that to blue.

11
00:00:52,740 --> 00:00:57,720
So whenever the mouse enters, it should update that value to blue.

12
00:00:57,930 --> 00:00:59,280
And you can see that as well.

13
00:00:59,280 --> 00:01:05,010
When you do inspect, when you do the code inspector within the browser, you see that now we've added

14
00:01:05,010 --> 00:01:06,450
in this color of blue.

15
00:01:06,780 --> 00:01:09,140
So right now, take a look at it.

16
00:01:09,330 --> 00:01:10,730
I entered it in by mistake.

17
00:01:10,950 --> 00:01:12,670
So there's our output elements.

18
00:01:12,670 --> 00:01:15,840
So no attributes yet, no styling attributes yet.

19
00:01:15,990 --> 00:01:19,820
But when I hover over, we add the style background, color blue.

20
00:01:19,980 --> 00:01:26,880
So that's the fact that we want and we also want to reset it back to white whatever we have mouse leave.

21
00:01:27,030 --> 00:01:32,130
So whenever the mouse leaves that element, we're going to update that background color and we're going

22
00:01:32,130 --> 00:01:33,680
to reset it back to white.

23
00:01:33,960 --> 00:01:35,940
So refresh and try that out.

24
00:01:36,420 --> 00:01:42,240
So now whenever we're on top, we've got a blue background and that means that we're in the active area

25
00:01:42,390 --> 00:01:47,820
and we also want to track that mouse, adding in one more event, listener.

26
00:01:48,090 --> 00:01:54,390
And this one is going to be for add event listener, mouse move whenever the mouse is moving, then

27
00:01:54,390 --> 00:02:01,650
we want to track its position so it's horizontal and as well as its vertical position.

28
00:02:01,650 --> 00:02:07,680
So it's X and Y position and we can get that information from the event object outputting it into the

29
00:02:07,680 --> 00:02:08,930
console for now.

30
00:02:09,120 --> 00:02:14,280
So whenever the mouse is moving, you see that we get all of this information and this is coming in

31
00:02:14,280 --> 00:02:16,590
from that e from that event object.

32
00:02:17,040 --> 00:02:19,980
And there's a couple variables that we want to pull out.

33
00:02:20,250 --> 00:02:23,970
And those are the page X and the page Y.

34
00:02:24,330 --> 00:02:29,730
So you see that this is corresponding with our position of where our mouse is located.

35
00:02:29,730 --> 00:02:33,870
So this page X, page Y, there's also an X and Y as well.

36
00:02:34,080 --> 00:02:36,690
So there's a number of options to get the same values.

37
00:02:36,690 --> 00:02:43,500
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.

38
00:02:43,950 --> 00:02:46,080
There's also in relation to the element.

39
00:02:46,320 --> 00:02:52,080
So our pixel values of X and Y in relation to the element.

40
00:02:52,260 --> 00:02:54,420
So those are available to us as well.

41
00:02:54,580 --> 00:02:56,880
And there's also client X and client Y.

42
00:02:56,970 --> 00:03:01,080
And you see those are the same as page X, Y and X and Y.

43
00:03:01,300 --> 00:03:02,280
So we've got a big choice.

44
00:03:02,280 --> 00:03:09,780
We can select any one that we want and use those as X and Y so we can do something like E X.

45
00:03:10,960 --> 00:03:20,530
And why so consoli why and that will give us the X and Y coordinates of where the mouse is located in

46
00:03:20,530 --> 00:03:21,470
real time of course.

47
00:03:21,640 --> 00:03:27,430
And that is going to be invoked any time that we're over that active element and see the other event.

48
00:03:27,430 --> 00:03:29,370
Listeners are still firing off.

49
00:03:29,590 --> 00:03:33,100
So we're still seeing that we're updating those values.

50
00:03:33,400 --> 00:03:34,100
So the next thing.

51
00:03:34,120 --> 00:03:40,690
Speaking of updating and outputting is that we need to update those values of the inner Temel of the

52
00:03:40,690 --> 00:03:41,170
elements.

53
00:03:41,410 --> 00:03:46,810
And we saw that earlier that we've selected them as most out and that was a node list.

54
00:03:47,080 --> 00:03:48,340
So we've got two nodes.

55
00:03:48,520 --> 00:03:51,730
And the first one is going to be the X, the second one is the Y.

56
00:03:51,880 --> 00:03:55,570
And because we only have the two, it's really easy to figure out which ones which.

57
00:03:55,900 --> 00:04:02,170
So update the value of this one to be X, and the second one is going to be the value that's contained

58
00:04:02,170 --> 00:04:06,040
within E Y, so we can visibly see where the coordinates are.

59
00:04:06,550 --> 00:04:12,700
So now whenever we're hovering over, we see we've got those X and Y coordinates being output and I'm

60
00:04:12,700 --> 00:04:14,620
actually going to move this one to the top.

61
00:04:15,250 --> 00:04:18,160
So it's a little bit easier to see where our coordinates are at.

62
00:04:18,340 --> 00:04:25,090
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

63
00:04:25,090 --> 00:04:25,710
end of the page.

64
00:04:25,960 --> 00:04:29,190
And as mentioned, this is the page X and Y coordinates.

65
00:04:29,380 --> 00:04:35,620
So it's not the relation to where the element is, where the mouse's on the element and you can track

66
00:04:35,620 --> 00:04:36,280
those as well.

67
00:04:36,430 --> 00:04:39,090
But for now, we're going to keep it as the page coordinates.

68
00:04:39,670 --> 00:04:42,910
So go ahead and add the mouse events into your project.

69
00:04:43,120 --> 00:04:48,370
So whoever you most enter, have it do something with the active area and whenever it leaves, reset

70
00:04:48,370 --> 00:04:54,220
it back to what it originally was and also add in that mouse move so we can track the X and Y coordinates

71
00:04:54,220 --> 00:04:57,910
of where the mouse is while it's moving over our active element.

72
00:04:58,150 --> 00:05:03,820
And you can be ready to move on to the next section, next lesson, where we're going to have some more

73
00:05:03,820 --> 00:05:06,760
interaction and some more fun stuff with JavaScript.

74
00:05:06,790 --> 00:05:07,440
So that's coming up.