1
00:00:00,300 --> 00:00:03,850
Welcome back and congratulations on making it this far into the course.

2
00:00:04,140 --> 00:00:06,340
This lesson is about the event object.

3
00:00:06,360 --> 00:00:10,770
We've seen it a little bit before when we were talking about this, and we're going to cover it in more

4
00:00:10,770 --> 00:00:14,010
detail in this lesson because this is really important.

5
00:00:14,370 --> 00:00:21,630
The event target is the property of the event interface, and it's a reference to the object that dispatched

6
00:00:21,750 --> 00:00:22,050
that.

7
00:00:22,350 --> 00:00:28,440
So whatever item you've clicked on and you've added the event listener on, we can get that event information

8
00:00:28,710 --> 00:00:35,520
and by default, some browsers will actually pass the event object directly within the function, such

9
00:00:35,520 --> 00:00:36,780
as Chrome will do that.

10
00:00:37,020 --> 00:00:40,500
Firefox is a little bit different, so it doesn't by default, pass it in.

11
00:00:40,710 --> 00:00:43,680
So you're going to see that there's differences in the way that the code gets handled.

12
00:00:43,890 --> 00:00:51,330
So the best way to go about it is to pass in the event object and then use that event target, whatever

13
00:00:51,330 --> 00:00:57,120
that element gets clicked and you can see it in action when you add an event listener and you take a

14
00:00:57,120 --> 00:01:04,020
closer look at what's being output and you take the event object by E and then you can see the different

15
00:01:04,020 --> 00:01:06,570
event types so you can see what type triggered it.

16
00:01:06,780 --> 00:01:08,690
And then there's also the event target.

17
00:01:08,940 --> 00:01:10,150
So let's take a closer look.

18
00:01:10,650 --> 00:01:16,230
So first of all, let's select an element and we can use that same button that we use the last time.

19
00:01:16,230 --> 00:01:17,740
So change background color.

20
00:01:17,970 --> 00:01:20,400
Now, of course, obviously, it doesn't have to be a button.

21
00:01:20,550 --> 00:01:26,670
You can use any element that you want and they're all going to work the same way and refresh and just

22
00:01:26,670 --> 00:01:28,100
make sure that we do have that objects.

23
00:01:28,260 --> 00:01:33,210
So adding an event listener, we're going to add a click and just an anonymous function.

24
00:01:33,360 --> 00:01:35,510
And this is where we're passing in the event.

25
00:01:35,730 --> 00:01:38,640
So console log out the event.

26
00:01:39,090 --> 00:01:41,010
Actually, we should do console directory.

27
00:01:41,190 --> 00:01:46,860
So we see that it's a mouse event that's triggered this event and let's see what information we can

28
00:01:46,860 --> 00:01:47,630
capture in here.

29
00:01:47,940 --> 00:01:50,520
So we've got all of the position.

30
00:01:50,520 --> 00:01:56,760
So the client position when it was when that event took place, we have the page position of where that

31
00:01:56,760 --> 00:01:57,840
event object is.

32
00:01:58,020 --> 00:01:59,160
We have the type of event.

33
00:01:59,190 --> 00:02:01,470
So if it's a mouse event, it'll be different.

34
00:02:01,620 --> 00:02:03,800
And in this case, it was a click event, of course.

35
00:02:04,140 --> 00:02:08,790
So we've got the event type there and we also have the event target.

36
00:02:08,810 --> 00:02:13,740
So this is the one that we want to look at, because this is going to also we also have a source element.

37
00:02:13,750 --> 00:02:17,830
So these are the same in this case and to work across all browsers.

38
00:02:17,830 --> 00:02:19,800
So the best one to use is of that target.

39
00:02:19,950 --> 00:02:24,000
And this is actually going to give us access to the element that triggered the event.

40
00:02:24,330 --> 00:02:27,870
And you can see all of the information of that element is contained in there.

41
00:02:28,320 --> 00:02:33,390
So you can use the event target to output the element that triggered the event.

42
00:02:33,540 --> 00:02:37,510
And then, of course, you can do more things with it and find out more information about it.

43
00:02:37,920 --> 00:02:44,370
So if we take our event target, that's going to be always that element that created the event.

44
00:02:45,090 --> 00:02:50,070
And this is also the same as when we saw this before we were using this.

45
00:02:50,340 --> 00:02:53,920
And you can see it's the same thing that gets returned back there.

46
00:02:53,970 --> 00:02:59,750
So if you're applying any type of changes to it, then this is how you can do that.

47
00:02:59,760 --> 00:03:04,970
You can always get that event target information and then utilize that within your code.

48
00:03:05,130 --> 00:03:08,640
So we do have an a challenge in this lesson, of course.

49
00:03:08,880 --> 00:03:15,750
And this is to update our challenge, too, so that you can apply the color changing on different elements.

50
00:03:16,080 --> 00:03:21,150
So add a bunch of different elements to your page and then we're going to add event listeners to those

51
00:03:21,150 --> 00:03:21,810
elements.

52
00:03:21,960 --> 00:03:26,670
And depending on what element gets clicked, that's the one we're going to be applying that random color

53
00:03:26,670 --> 00:03:27,240
change to.

54
00:03:27,390 --> 00:03:33,060
And you can use that same random color function that we generated in the earlier lesson.

55
00:03:33,600 --> 00:03:37,700
So here you can pause the video and I'll walk you through the solution coming up.

56
00:03:37,710 --> 00:03:39,960
Also give you a quick sneak peek at the code.

57
00:03:40,200 --> 00:03:41,700
We've got a bunch of span's here.

58
00:03:42,000 --> 00:03:48,540
So how about we add some additional options into those span's and select those as are elements that

59
00:03:48,540 --> 00:03:49,160
we're going to use?

60
00:03:49,170 --> 00:03:54,590
You can call it spans or you could add in some default device if you want to query selector.

61
00:03:54,600 --> 00:04:01,080
And in this case, it's query selector all as we're selecting all of the elements that are that have

62
00:04:01,080 --> 00:04:02,190
a tag of spane.

63
00:04:02,430 --> 00:04:06,620
And let's also add back in those curly brackets and the round of brackets.

64
00:04:06,900 --> 00:04:10,440
So refresh and make sure that we do have the span's.

65
00:04:11,520 --> 00:04:14,670
So we've got a node list of all the different spans.

66
00:04:14,680 --> 00:04:18,120
And in this case we can do span's for each.

67
00:04:18,360 --> 00:04:23,280
I'm going to loop through all the different elements of selecting the elements and then also the index

68
00:04:23,400 --> 00:04:24,280
if we need to use it.

69
00:04:24,300 --> 00:04:29,760
And as we look through, let's first make sure we've got all of the elements properly in the console,

70
00:04:30,000 --> 00:04:32,430
so output them the elements into the console.

71
00:04:32,730 --> 00:04:33,870
So we do have all of them.

72
00:04:34,170 --> 00:04:39,030
Let's update some of the style properties to them, giving them a padding value.

73
00:04:39,180 --> 00:04:43,190
And also I want to update the background color to them or the border.

74
00:04:43,230 --> 00:04:48,300
So I know this wasn't part of the exercise, but this is going to make it easier for us to spot where

75
00:04:48,300 --> 00:04:50,280
the span's start and where the span's.

76
00:04:50,280 --> 00:04:57,360
And so we've got a bunch of span's and let's take the style and we'll display block for the Spens.

77
00:04:57,360 --> 00:04:58,350
That's what that looks like.

78
00:04:58,500 --> 00:04:59,430
So now we've got them.

79
00:04:59,540 --> 00:05:05,840
All as clear, different spaces, they're bigger now, so we can lot easier see them when we set their

80
00:05:05,840 --> 00:05:06,650
background colors.

81
00:05:06,980 --> 00:05:08,500
So now let's make them clickable.

82
00:05:08,780 --> 00:05:15,290
So as we're looping through, we can add in the ability to click on those those spans.

83
00:05:15,320 --> 00:05:18,560
So let's take the elements, add event listener.

84
00:05:19,130 --> 00:05:25,250
In this case, we'll use a click then anonymous function and we're going to pass in that event object

85
00:05:25,250 --> 00:05:27,130
as e within the anonymous function.

86
00:05:27,530 --> 00:05:31,370
So whenever they get clicked, we can get the E information in the console.

87
00:05:31,380 --> 00:05:35,840
So each one of those, as soon as they get clicked, we get the event information.

88
00:05:36,260 --> 00:05:38,610
And so that means we can also target them.

89
00:05:38,630 --> 00:05:42,800
So now in this format, there's actually a number of different ways that we can select that element

90
00:05:43,070 --> 00:05:45,630
so we can do E target.

91
00:05:45,680 --> 00:05:52,010
There's also a console log L because we've got the element object that we're referencing here as we're

92
00:05:52,010 --> 00:05:53,300
looping through each one of those.

93
00:05:53,690 --> 00:05:55,520
And we can also do this.

94
00:05:55,640 --> 00:06:01,160
So we've got lots of options and they're all going to be the same thing may make this bigger.

95
00:06:01,520 --> 00:06:02,420
And I'll clear this.

96
00:06:02,600 --> 00:06:06,350
And as you see, we click one of them and it's all referencing that same object.

97
00:06:06,800 --> 00:06:12,470
So there's a number of options on how we can select and we can apply properties to this element.

98
00:06:13,070 --> 00:06:16,070
So next to that, we need to do is we need to just update that.

99
00:06:17,100 --> 00:06:22,800
Background, color, and because this is a lesson known event target, let's select that one to apply

100
00:06:22,800 --> 00:06:28,180
the style, background, color, and then we need to recreate our random color function.

101
00:06:28,650 --> 00:06:29,680
So let's do that as well.

102
00:06:30,030 --> 00:06:34,610
We'll create a function for random taking in a number of value.

103
00:06:35,340 --> 00:06:40,350
And then for this, we're going to return random in order to generate the random number and we're going

104
00:06:40,350 --> 00:06:44,170
to multiply it by NUM plus one.

105
00:06:44,700 --> 00:06:46,830
And so this is going to give us a value.

106
00:06:46,950 --> 00:06:49,010
So increment num plus one.

107
00:06:49,050 --> 00:06:52,380
So if we're passing in 255, it's going to bring it to 256.

108
00:06:52,590 --> 00:06:55,640
But the math flaw is going to bring it back down to zero.

109
00:06:55,800 --> 00:06:58,830
So it's going to return back a number from zero to 255.

110
00:06:59,340 --> 00:07:01,350
So that's why we're adding in that plus one.

111
00:07:01,500 --> 00:07:02,820
So you don't always need to do that.

112
00:07:02,820 --> 00:07:05,400
Depends on the type of functionality that you're looking for.

113
00:07:05,430 --> 00:07:06,850
So that's just a return on that.

114
00:07:07,290 --> 00:07:10,380
And next, we need to create another one for the random color.

115
00:07:10,830 --> 00:07:16,230
And this one actually doesn't need to have anything in there because we're just simply returning back

116
00:07:16,230 --> 00:07:17,270
a string value.

117
00:07:17,550 --> 00:07:23,370
So we've got our R.G. and then we're concatenating that random comma, separate these so we get the

118
00:07:23,370 --> 00:07:29,610
right format, concatenating it all together and again, comma, separating and then closing off the

119
00:07:29,610 --> 00:07:30,420
rounded bracket.

120
00:07:30,570 --> 00:07:32,280
And that's going to be the value that we can return.

121
00:07:32,460 --> 00:07:38,640
So now whenever we click these, you see we've got random colors affecting any one of the spans that

122
00:07:38,640 --> 00:07:39,510
we have on the page.

123
00:07:39,810 --> 00:07:43,720
So if we add in new span's, they're going to also have that same effect.

124
00:07:43,860 --> 00:07:47,910
So coming up next, we're going to track key press and key press events.

125
00:07:47,910 --> 00:07:48,770
So that's still to come.