1
00:00:02,150 --> 00:00:04,689
Now when dealing with events,

2
00:00:04,689 --> 00:00:07,500
the browser actually automatically

3
00:00:07,500 --> 00:00:10,970
provides you with a certain parameter,

4
00:00:10,970 --> 00:00:13,430
which had passes into the function,

5
00:00:13,430 --> 00:00:17,790
you tell the browser to execute when that event occurs.

6
00:00:17,790 --> 00:00:19,610
So in this function,

7
00:00:19,610 --> 00:00:22,580
which we plan on connecting to an event,

8
00:00:22,580 --> 00:00:26,400
we can accept a special parameter,

9
00:00:26,400 --> 00:00:29,020
which will be passed in automatically

10
00:00:29,020 --> 00:00:32,000
by the browser for every event.

11
00:00:32,000 --> 00:00:35,520
So no matter to which event you might be listening to.

12
00:00:35,520 --> 00:00:40,500
And that's an object describing the event that occurs.

13
00:00:40,500 --> 00:00:44,600
So here I'll name this parameter "event".

14
00:00:44,600 --> 00:00:48,930
The name is up to you because it's still your function.

15
00:00:48,930 --> 00:00:51,360
But since I will use this function

16
00:00:51,360 --> 00:00:52,820
for listening to an event,

17
00:00:52,820 --> 00:00:57,440
the browser will provide me a value for this parameter.

18
00:00:57,440 --> 00:01:00,410
I can still name the parameter however I want,

19
00:01:00,410 --> 00:01:03,020
because when the browser executes that function

20
00:01:03,020 --> 00:01:05,489
behind the scenes once the event occurs,

21
00:01:05,489 --> 00:01:08,560
it will just set this first parameter

22
00:01:08,560 --> 00:01:10,920
to this event object value,

23
00:01:10,920 --> 00:01:13,423
no matter how the parameter was named.

24
00:01:14,620 --> 00:01:18,090
And we can now have a look into this event object,

25
00:01:18,090 --> 00:01:21,770
maybe by just console logging it here.

26
00:01:21,770 --> 00:01:23,810
So that we see what's inside of this

27
00:01:23,810 --> 00:01:26,323
automatically generated object.

28
00:01:27,600 --> 00:01:32,190
If I saved that, and I now type a T in here,

29
00:01:32,190 --> 00:01:35,393
I get this event object being locked here.

30
00:01:36,550 --> 00:01:37,560
And if we expanded,

31
00:01:37,560 --> 00:01:41,290
we see we have a couple of properties in there.

32
00:01:41,290 --> 00:01:45,510
Now this is now not an HTML element object,

33
00:01:45,510 --> 00:01:48,850
instead it's an automatically generated object

34
00:01:48,850 --> 00:01:50,850
that contains a bunch of properties

35
00:01:50,850 --> 00:01:53,380
describing the event that occurred.

36
00:01:53,380 --> 00:01:56,440
It actually also contains a couple of methods,

37
00:01:56,440 --> 00:02:00,203
which we don't see here and which we don't need right now.

38
00:02:01,440 --> 00:02:02,780
Now, what we can see

39
00:02:02,780 --> 00:02:06,700
in here are a couple of strange sounding properties,

40
00:02:06,700 --> 00:02:09,270
which are a bit more advanced.

41
00:02:09,270 --> 00:02:13,300
But, we for example, also see this data property,

42
00:02:13,300 --> 00:02:16,080
which conveniently actually contains

43
00:02:16,080 --> 00:02:18,780
data that belongs to this event,

44
00:02:18,780 --> 00:02:21,610
and which event carries which data,

45
00:02:21,610 --> 00:02:23,710
and if it carries any data at all

46
00:02:23,710 --> 00:02:26,810
does depend on which event you are listening to.

47
00:02:26,810 --> 00:02:29,890
So no matter which event you are listening to,

48
00:02:29,890 --> 00:02:33,050
you will always get an event object automatically,

49
00:02:33,050 --> 00:02:35,670
but the content of that object

50
00:02:35,670 --> 00:02:38,470
will depend on the kind of event.

51
00:02:38,470 --> 00:02:40,920
And for an input event, you, for example,

52
00:02:40,920 --> 00:02:44,090
get this data property that carries the

53
00:02:44,090 --> 00:02:47,263
input value the user provided.

54
00:02:48,650 --> 00:02:51,390
Another very useful property we got in there,

55
00:02:51,390 --> 00:02:53,763
is this target property.

56
00:02:54,620 --> 00:02:58,530
That holds the HTML element object

57
00:02:58,530 --> 00:03:00,630
on which this event occurred.

58
00:03:00,630 --> 00:03:02,623
So in this case, the input element.

59
00:03:03,860 --> 00:03:06,500
And this is the exact same element

60
00:03:06,500 --> 00:03:08,850
as we stored here in this variable.

61
00:03:08,850 --> 00:03:11,940
So which we selected with query selector input,

62
00:03:11,940 --> 00:03:14,330
that's the exact same element object,

63
00:03:14,330 --> 00:03:16,440
which we also get access through,

64
00:03:16,440 --> 00:03:19,020
through this target property

65
00:03:19,020 --> 00:03:22,253
on this event object which we get automatically.

66
00:03:23,380 --> 00:03:24,750
And since that's the case,

67
00:03:24,750 --> 00:03:29,480
we got two alternatives for retrieving that value.

68
00:03:29,480 --> 00:03:31,820
We can still use that variable

69
00:03:31,820 --> 00:03:34,170
because we will still need to get access to

70
00:03:34,170 --> 00:03:35,830
this variable anyways,

71
00:03:35,830 --> 00:03:38,333
because we needed to add the event listener.

72
00:03:39,500 --> 00:03:41,210
But inside of this function,

73
00:03:41,210 --> 00:03:43,900
which is executed because of an event,

74
00:03:43,900 --> 00:03:47,330
we actually also could alternatively

75
00:03:47,330 --> 00:03:51,440
get access to our entered text here,

76
00:03:51,440 --> 00:03:54,690
by instead using "event.target",

77
00:03:54,690 --> 00:03:59,190
which is also our input element, as I showed you, ".value".

78
00:03:59,190 --> 00:04:01,277
So this is our input element and

79
00:04:01,277 --> 00:04:04,283
therefore it still has this value property.

80
00:04:05,220 --> 00:04:08,470
And hence, if I do that and I temporarily

81
00:04:08,470 --> 00:04:11,490
comment out this event console log,

82
00:04:11,490 --> 00:04:14,770
then you will still see that with every keystroke,

83
00:04:14,770 --> 00:04:18,053
the current input is being output here on the right.

84
00:04:19,700 --> 00:04:22,880
Now, one very important word about this data property,

85
00:04:22,880 --> 00:04:24,313
which I also show you.

86
00:04:25,490 --> 00:04:27,830
If I do actually

87
00:04:28,970 --> 00:04:32,100
use "event.data" for getting the input,

88
00:04:32,100 --> 00:04:35,410
you will see that there is an important difference.

89
00:04:35,410 --> 00:04:38,980
Event target value or input element value,

90
00:04:38,980 --> 00:04:42,850
always gave us the full value that is currently

91
00:04:42,850 --> 00:04:44,610
stored in this input element.

92
00:04:44,610 --> 00:04:47,073
So the complete word or sentence.

93
00:04:48,200 --> 00:04:52,380
With event data, instead, as you see, as I type here,

94
00:04:52,380 --> 00:04:55,410
I just get to the concrete character

95
00:04:55,410 --> 00:04:58,590
or the concrete input that was inserted

96
00:04:58,590 --> 00:05:02,310
with that last input event emission.

97
00:05:02,310 --> 00:05:04,680
And that therefore is a different behavior,

98
00:05:04,680 --> 00:05:08,090
which sometimes might be what you're looking for.

99
00:05:08,090 --> 00:05:11,570
But very often it's not what you're looking for.

100
00:05:11,570 --> 00:05:15,140
So here, this is different.

101
00:05:15,140 --> 00:05:16,670
It's doing a different thing.

102
00:05:16,670 --> 00:05:20,580
These two approaches on the other hand are equivalents here,

103
00:05:20,580 --> 00:05:22,660
and I'll use event target value,

104
00:05:22,660 --> 00:05:25,653
but we could also use input element value.

105
00:05:26,950 --> 00:05:30,520
As a side note, if we do use event target value,

106
00:05:30,520 --> 00:05:34,850
we have the extra small benefit that we now did get rid

107
00:05:34,850 --> 00:05:36,900
of that external variable,

108
00:05:36,900 --> 00:05:40,480
which we previously used in this function.

109
00:05:40,480 --> 00:05:42,350
Now we're not using it anymore

110
00:05:42,350 --> 00:05:44,340
because now we're extracting the data

111
00:05:44,340 --> 00:05:47,343
we're interested in from that event target.

112
00:05:48,620 --> 00:05:50,440
And that's simply an alternative,

113
00:05:50,440 --> 00:05:52,910
and it is useful to know that we get this

114
00:05:52,910 --> 00:05:55,960
default event object for every event we can

115
00:05:55,960 --> 00:05:59,960
listen to with useful information about the event.

116
00:05:59,960 --> 00:06:02,240
And it's always important to keep in mind

117
00:06:02,240 --> 00:06:07,130
that the concrete information will depend on the event.

118
00:06:07,130 --> 00:06:09,230
For example, for a click event,

119
00:06:09,230 --> 00:06:12,910
if we also accept the event object there,

120
00:06:12,910 --> 00:06:17,310
on that change paragraph text event handler function,

121
00:06:17,310 --> 00:06:20,180
and I console log that event here.

122
00:06:20,180 --> 00:06:22,260
We see that for this click event,

123
00:06:22,260 --> 00:06:24,320
we get different kinds of data.

124
00:06:24,320 --> 00:06:26,110
If I now click on this,

125
00:06:26,110 --> 00:06:28,560
I see I get a mouse event here.

126
00:06:28,560 --> 00:06:30,270
Before you may remembered

127
00:06:30,270 --> 00:06:32,480
this was called an input event.

128
00:06:32,480 --> 00:06:35,320
That's just some internal type description

129
00:06:35,320 --> 00:06:37,320
of this type of event.

130
00:06:37,320 --> 00:06:41,570
And we see that in here, we got our pieces of information,

131
00:06:41,570 --> 00:06:44,900
for example, the coordinates on that screen,

132
00:06:44,900 --> 00:06:46,700
where that click occurred,

133
00:06:46,700 --> 00:06:49,740
and whether the control key was also pressed

134
00:06:49,740 --> 00:06:54,740
in conjunction with the click or the alt key and so on.

135
00:06:54,910 --> 00:06:58,470
So a bunch of extra pieces of information,

136
00:06:58,470 --> 00:07:01,090
that can also be nice to know,

137
00:07:01,090 --> 00:07:03,860
but for example, we also get the target again,

138
00:07:03,860 --> 00:07:06,020
if we would want to interact with

139
00:07:06,020 --> 00:07:07,763
that concrete target again.

140
00:07:09,020 --> 00:07:13,010
These are events and definitely as always with everything,

141
00:07:13,010 --> 00:07:17,280
feel free to play around with that, add more elements,

142
00:07:17,280 --> 00:07:20,780
add more event listeners, log these event objects,

143
00:07:20,780 --> 00:07:24,133
and see what's in there in what you can do with them.

144
00:07:24,980 --> 00:07:28,870
We now gathered all the important information we need

145
00:07:28,870 --> 00:07:32,010
to build a first version of this demo project

146
00:07:32,010 --> 00:07:34,890
I kept showing to you over and over again,

147
00:07:34,890 --> 00:07:38,033
and therefore, that is what we'll do in the next lecture.