1
00:00:00,210 --> 00:00:02,150
OK we'll come back.

2
00:00:02,400 --> 00:00:07,620
Back in the introduction to javascript I mentioned that one of the important reasons for learning javascript

3
00:00:07,680 --> 00:00:10,520
is that we can use it to make our pages interactive.

4
00:00:10,680 --> 00:00:16,590
It's how we can run code when a user clicks on a button or type something in or hits the arrow key or

5
00:00:16,590 --> 00:00:17,920
whatever they do.

6
00:00:18,090 --> 00:00:23,310
We can have some corresponding code that is executed at a given point in time not just executed right

7
00:00:23,310 --> 00:00:24,880
at the beginning of the page.

8
00:00:25,410 --> 00:00:28,290
So to do that we need to talk about Dom events.

9
00:00:28,320 --> 00:00:31,250
So this video will be an introduction to Dom events.

10
00:00:31,260 --> 00:00:36,300
Conceptually the process for setting them up and then also the syntax.

11
00:00:36,300 --> 00:00:38,660
So as I mentioned events are everywhere.

12
00:00:38,670 --> 00:00:43,170
Think about when you interact with the web page the different things that happen you can click on things

13
00:00:43,170 --> 00:00:47,330
like a button you can hover over a link and something might pop up.

14
00:00:47,370 --> 00:00:50,320
You can drag and drop elements on certain pages.

15
00:00:50,550 --> 00:00:55,440
You might want to have code that runs from the user double clicks or actually this web page has a few

16
00:00:55,440 --> 00:00:56,650
examples.

17
00:00:56,670 --> 00:01:03,550
This slide dot com is a Web site and I'm hitting the left and right arrow keys to change slides.

18
00:01:03,690 --> 00:01:09,300
So some code is being run when I hit the left arrow key or the right arrow key or when I click over

19
00:01:09,300 --> 00:01:10,050
here.

20
00:01:10,590 --> 00:01:15,780
That's also an event and it's doing something it's running some code that's changing the current slide

21
00:01:15,780 --> 00:01:16,860
.

22
00:01:16,950 --> 00:01:20,930
So the point is events are all over the place and they're really exciting.

23
00:01:20,920 --> 00:01:26,070
It's one of my favorite topics to teach because now we can make our web pages interactive we can take

24
00:01:26,070 --> 00:01:31,230
the manipulation stuff that we've been learning about changing colors changing text and then we can

25
00:01:31,230 --> 00:01:35,070
actually do that when something in particular happens.

26
00:01:35,070 --> 00:01:38,340
So this really unlocks the potential of manipulating the dorm.

27
00:01:38,370 --> 00:01:43,170
It's how we're going to make games it's how we'll make form validators tic tac toe we're going to make

28
00:01:43,170 --> 00:01:49,050
a really cool color picker game and that all stems from these events.

29
00:01:49,050 --> 00:01:55,890
So the way that these events work is that we actually attach them to specific elements so we select

30
00:01:55,890 --> 00:02:04,440
an element like the first button or the second H-1 or the input where a type is equal to text and then

31
00:02:04,440 --> 00:02:07,590
we attach an event listener to that selected element.

32
00:02:07,920 --> 00:02:15,540
So as an example we might be listening for a click on a button we might listen for a hover event on

33
00:02:15,540 --> 00:02:20,880
an H1 we might listen for key press event in a text input and we'll talk more about the differences

34
00:02:20,880 --> 00:02:21,990
between those events.

35
00:02:21,990 --> 00:02:26,490
There's so many different types of events in javascript but what's important is that we have to have

36
00:02:26,490 --> 00:02:30,170
an event that is being listened for on a given element.

37
00:02:30,180 --> 00:02:34,890
So just like before when I would talk about select and then manipulate that still applies.

38
00:02:34,920 --> 00:02:41,190
We need to select something and then the manipulation that happens is us adding an event listener to

39
00:02:41,190 --> 00:02:43,740
that thing that we selected.

40
00:02:43,740 --> 00:02:48,930
There's one method in particular that we're going to use all the time which is called add event listener

41
00:02:48,930 --> 00:02:49,400
.

42
00:02:49,650 --> 00:02:56,200
So at event listener is what we use once we select an element like the first button or the input type

43
00:02:56,200 --> 00:03:02,160
because password and we have something selected then we call add event listener on it and we give two

44
00:03:02,160 --> 00:03:03,070
arguments.

45
00:03:03,330 --> 00:03:06,950
The first one is the type of event that we want to listen for.

46
00:03:07,350 --> 00:03:12,790
And the second argument is the code that we want to run when that event happens.

47
00:03:13,260 --> 00:03:14,330
So here's an example.

48
00:03:14,400 --> 00:03:19,590
I'm selecting the first button on a page doesn't really matter where the button is or how it looks or

49
00:03:19,590 --> 00:03:22,060
anything just any button.

50
00:03:22,350 --> 00:03:29,430
And then I'm calling button at event listener click and then the second argument is a function that

51
00:03:29,430 --> 00:03:30,540
goes all the way to here.

52
00:03:30,750 --> 00:03:33,690
And this code isn't run right away.

53
00:03:33,690 --> 00:03:35,910
Remember this is called a callback.

54
00:03:35,910 --> 00:03:38,140
This code is not run immediately.

55
00:03:38,430 --> 00:03:42,000
It's only run once this event fires.

56
00:03:42,000 --> 00:03:46,390
So once you click on the button javascript goes in it calls back.

57
00:03:46,440 --> 00:03:51,630
This function says hey it's your moment to shine and come back here ready let's execute you.

58
00:03:51,630 --> 00:03:56,040
And then that code is run and we get counseled don't log someone click the button.

59
00:03:56,250 --> 00:04:02,130
So this function will run whenever a button is quick to run over with the specific button that we selected

60
00:04:02,130 --> 00:04:05,290
as clicked.

61
00:04:05,910 --> 00:04:07,540
So here's another example.

62
00:04:07,830 --> 00:04:15,060
This case I have the mark up here a button and a paragraph and I selected both of them with Kery selector

63
00:04:15,750 --> 00:04:21,630
and I save them both to variables and then all that we do is add a click listener so button does add

64
00:04:21,630 --> 00:04:26,910
event listener click and then the second argument is that callback function.

65
00:04:26,910 --> 00:04:32,610
And what we're going to do whenever that button is clicked is changed the paragraphs text content to

66
00:04:32,610 --> 00:04:39,660
be someone click the button and you can see when I click that button it changes from no one is clicked

67
00:04:39,660 --> 00:04:42,260
me and to someone has click the button.

68
00:04:42,930 --> 00:04:50,180
So now I'm going to do a quick demonstration using our Dom demo page let's start by making this H-1

69
00:04:50,180 --> 00:04:50,790
right here.

70
00:04:50,810 --> 00:04:53,700
Change color when a user clicks on it.

71
00:04:53,780 --> 00:04:58,310
So to do that we need to start always by selecting the H-1.

72
00:04:58,810 --> 00:05:00,510
So we have a bunch of options there.

73
00:05:00,530 --> 00:05:09,070
I'm going to just use queery selector document that query selector H-1 make sure we have it.

74
00:05:09,310 --> 00:05:10,460
All right.

75
00:05:10,460 --> 00:05:14,920
Then we just write H-1 that add event listener.

76
00:05:15,010 --> 00:05:16,790
Remember there's two arguments.

77
00:05:16,940 --> 00:05:19,910
The first one is the event that we're listening for.

78
00:05:20,060 --> 00:05:24,050
And we'll spend some more time talking about the different events the different options.

79
00:05:24,050 --> 00:05:30,050
For now we're just doing click and the second one is the code we want to run when the user clicks.

80
00:05:30,310 --> 00:05:37,060
So function and just start really simple and just do an alert when the user clicks.

81
00:05:37,160 --> 00:05:44,330
So we'll do a alert each one was clicked just like this.

82
00:05:44,750 --> 00:05:46,990
And now let's hit enter.

83
00:05:47,120 --> 00:05:48,700
Nothing changes right away.

84
00:05:49,190 --> 00:05:52,910
But now if I click on the one so I'll close this.

85
00:05:52,910 --> 00:05:54,570
If I click anywhere on the page.

86
00:05:54,590 --> 00:05:56,400
Aside from the H-1 nothing happens.

87
00:05:56,620 --> 00:06:01,150
As soon as I click the H-1 though it tells me H-1 was correct.

88
00:06:01,430 --> 00:06:02,510
So that's important.

89
00:06:02,500 --> 00:06:09,730
It only applies to the H-1 but that does mean I can go over here and click because remember if I inspect

90
00:06:09,740 --> 00:06:10,130
this

91
00:06:12,980 --> 00:06:15,290
the H-1 goes all the way across the screen.

92
00:06:15,500 --> 00:06:20,720
So just something to keep in mind that's fine for us in this case but it will pop up occasionally where

93
00:06:20,720 --> 00:06:25,680
things behave a little bit different than you might want them to and you need to use them CSSA maybe

94
00:06:25,700 --> 00:06:30,190
to shorten the stage one or you change your listener anyway.

95
00:06:30,640 --> 00:06:35,130
So rather than just alerting Let's try doing something else.

96
00:06:35,330 --> 00:06:42,140
And if I just hit the up arrow an add event listener click and I change the code in here and I do something

97
00:06:42,130 --> 00:06:54,260
like H-1 that style background equals and let's do orange orange background and I hit enter.

98
00:06:54,250 --> 00:07:01,870
Again nothing changes right away but when I click pay attention to what happens the first thing that

99
00:07:01,880 --> 00:07:06,030
happens is that it still says in an alert that H-1 was clicked.

100
00:07:06,170 --> 00:07:10,360
And then when I close that it then changes to be orange.

101
00:07:10,730 --> 00:07:14,840
So the moral here is that we can have more than one listener on a given element.

102
00:07:14,840 --> 00:07:22,090
When we click on that H-1 the first listener that we added was listening for a click and it ran an alert

103
00:07:22,610 --> 00:07:28,280
and then we added another listener afterwards that also listened for a click but it changed the background

104
00:07:28,270 --> 00:07:28,890
color.

105
00:07:28,910 --> 00:07:31,200
So when I click both of them run.

106
00:07:31,390 --> 00:07:37,190
And thats always going to happen for now if I click again I get the alert and its changed to orange

107
00:07:37,320 --> 00:07:42,190
of course you dont see that because it was already orange but you have to trust me.

108
00:07:42,290 --> 00:07:45,000
It keeps changing it to orange over and over and over.

109
00:07:45,670 --> 00:07:48,560
OK I I'm going to refresh and get rid of all of that.

110
00:07:48,590 --> 00:07:52,720
I also want to do a quick demonstration by adding a listener to the UL.

111
00:07:52,880 --> 00:08:03,320
So lets do a document dump query selector UL and remember we have three allies instead of just one ul

112
00:08:03,360 --> 00:08:04,300
.

113
00:08:04,490 --> 00:08:08,500
So I'm going to show you what happens when we set it on a parent element like that.

114
00:08:08,510 --> 00:08:11,850
Well and I'm not going to use a variable just going to do this here.

115
00:08:12,130 --> 00:08:14,640
Adamant listener.

116
00:08:15,250 --> 00:08:16,140
Click.

117
00:08:16,550 --> 00:08:17,930
So that's first argument.

118
00:08:17,930 --> 00:08:20,330
The second one is the function that we want to run

119
00:08:24,610 --> 00:08:25,560
just like this.

120
00:08:25,880 --> 00:08:27,410
And I'm going to start.

121
00:08:27,680 --> 00:08:35,720
Let's just do a console that log well was clicks and you know what.

122
00:08:35,810 --> 00:08:37,210
That's passive voice.

123
00:08:37,250 --> 00:08:38,050
Bad idea.

124
00:08:38,300 --> 00:08:39,270
Let's do.

125
00:08:39,460 --> 00:08:43,550
You clicked the UL much much better.

126
00:08:43,880 --> 00:08:44,520
OK.

127
00:08:44,720 --> 00:08:48,430
So let's keep the console open and let's click on the UL.

128
00:08:48,980 --> 00:08:50,420
But how would we click on the oil.

129
00:08:50,450 --> 00:08:53,090
Because the well has three allies inside of it.

130
00:08:53,120 --> 00:08:55,290
The UL is this entire thing right here.

131
00:08:55,320 --> 00:09:00,890
So any quick doesn't matter which ally I'm on just anywhere in the well.

132
00:09:01,040 --> 00:09:02,820
You can see the number incrementing here.

133
00:09:02,930 --> 00:09:07,150
Any quick on the well it's going to execute this console dot log.

134
00:09:08,120 --> 00:09:14,290
So let's refresh one more time and this time let's say that I want to change the ally itself.

135
00:09:14,300 --> 00:09:17,540
When I click on an individual ally I want something to happen.

136
00:09:17,960 --> 00:09:19,400
There are a few ways of doing that.

137
00:09:19,420 --> 00:09:25,840
And we're going to start with just the simplest one which is attaching one listener to each ally as

138
00:09:25,850 --> 00:09:26,360
a heads up.

139
00:09:26,360 --> 00:09:32,880
What we will be doing eventually is attaching one listener to the UL and then inside of that listener

140
00:09:32,880 --> 00:09:32,940
.

141
00:09:32,990 --> 00:09:39,250
We're going to detect which lie specifically inside the UL was clicked on all with one Lessner.

142
00:09:39,250 --> 00:09:44,230
For now though we're going to added a separate listener to every lie so we need to start by selecting

143
00:09:44,240 --> 00:09:55,570
the Allies so our allies equals document dot queery selector all ally makes sure we have them all.

144
00:09:55,570 --> 00:09:59,040
All right then we need to do a for loop.

145
00:09:59,210 --> 00:10:02,190
So for var I equals zero.

146
00:10:02,410 --> 00:10:04,880
Remember that I said we'd be doing this all the time.

147
00:10:04,880 --> 00:10:09,670
So I less than allies that length I plus plus

148
00:10:13,730 --> 00:10:14,740
just like that.

149
00:10:15,050 --> 00:10:20,600
And then inside of here we're actually going to add a listener to each individual ally.

150
00:10:20,840 --> 00:10:21,940
So that looks like this.

151
00:10:21,960 --> 00:10:27,350
Elyse I so that gives us the specific ally and event listener

152
00:10:30,080 --> 00:10:39,220
click function just like that and done this a little bit.

153
00:10:39,770 --> 00:10:41,920
And then the code that we want to run.

154
00:10:42,320 --> 00:10:49,250
Let's change the color of the ally that was clicked up and let's just change it to be purple.

155
00:10:49,250 --> 00:10:51,250
So we have a few different options.

156
00:10:51,290 --> 00:10:54,600
What I need to do is refer to the ally that was clicked on.

157
00:10:54,800 --> 00:11:00,980
So I could do this allies I although that's not really a great solution because there there's a much

158
00:11:01,000 --> 00:11:05,320
easier way of doing that which is to use this keyword.

159
00:11:05,680 --> 00:11:12,410
So inside of a listener the key word this refers to the item that was clicked on or the item that was

160
00:11:12,410 --> 00:11:18,250
hovered on or the item that the key press occurred in wherever the element that goes right before the

161
00:11:18,430 --> 00:11:23,100
at event whatever whatever's selected there is what this refers to.

162
00:11:23,140 --> 00:11:30,640
So I can write this dot style that color equals purple.

163
00:11:31,000 --> 00:11:33,140
And actually that's something more obvious.

164
00:11:33,230 --> 00:11:34,150
It is a small font.

165
00:11:34,150 --> 00:11:36,670
So let's do pink just like that.

166
00:11:37,040 --> 00:11:38,500
I hit enter.

167
00:11:38,500 --> 00:11:46,020
Nothing immediately happens but if I click on an ally you can see that it changes to be pink.

168
00:11:47,410 --> 00:11:53,960
And if I keep clicking keep changing to pink You just can't tell.

169
00:11:54,080 --> 00:12:00,110
So this pattern here of selecting a bunch of things looping through them individually and adding an

170
00:12:00,110 --> 00:12:03,670
event listener to each of them is really really common.

171
00:12:03,710 --> 00:12:11,170
We're going to see it all the time in the next few projects that we make.

172
00:12:11,270 --> 00:12:16,640
The last thing I'll mention here is that you don't always have to use an anonymous function like we

173
00:12:16,630 --> 00:12:20,830
did here where you write function with parentheses and you don't give it a name.

174
00:12:20,990 --> 00:12:22,330
You don't have to do that.

175
00:12:22,370 --> 00:12:25,790
You can declare a named function separately like I did here.

176
00:12:26,090 --> 00:12:31,200
Function change text and then all that we have to do is say button that add event listener or click

177
00:12:31,420 --> 00:12:33,890
and then we give it change text.

178
00:12:34,070 --> 00:12:38,830
Notice that we don't have parentheses afterwards because I would execute the function immediately which

179
00:12:38,840 --> 00:12:39,890
is not what we want.

180
00:12:40,180 --> 00:12:46,880
So we're just passing the value of this function we're passing the content basically to this quick listener

181
00:12:47,170 --> 00:12:51,100
and saying here's the function I want you to run when the user clicks on this button.

182
00:12:51,190 --> 00:12:52,810
But don't run it just yet.

183
00:12:52,820 --> 00:12:55,350
So these two will work exactly the same.

184
00:12:55,370 --> 00:12:57,030
It's just a matter of preference.

185
00:12:57,190 --> 00:13:00,830
For the most part there are some differences that we may encounter later.

186
00:13:00,880 --> 00:13:02,980
I would much prefer to use this.

187
00:13:03,230 --> 00:13:08,240
The only time when I wouldn't use an anonymous function is if I needed to use that code again somewhere

188
00:13:08,240 --> 00:13:10,160
else outside of the clock listener.

189
00:13:10,150 --> 00:13:15,100
So if I wanted to run it myself individually or I wanted to run it instead of another quick listener

190
00:13:15,530 --> 00:13:21,260
rather than duplicating this function I would give it a name and then duplicate just the name where

191
00:13:21,260 --> 00:13:22,600
I use it twice.

192
00:13:23,060 --> 00:13:28,660
OK so next up you're going to get a chance to do some quick exercises using quick Wisner's and some

193
00:13:28,660 --> 00:13:30,650
of the things we've learned in the last few videos.