1
00:00:05,090 --> 00:00:06,410
Welcome back.

2
00:00:06,500 --> 00:00:10,130
Let's get started with mouse events.

3
00:00:10,160 --> 00:00:11,900
Let's get rocking.

4
00:00:12,050 --> 00:00:13,070
All right.

5
00:00:13,070 --> 00:00:18,290
So back to our Visual Studio code or my visual media code.

6
00:00:18,440 --> 00:00:22,940
As usual, I have provided a starter template for you.

7
00:00:23,100 --> 00:00:29,270
All you need to do is extract it and open using your preferred code editor.

8
00:00:29,480 --> 00:00:33,190
So inside this folder we have a couple of files.

9
00:00:33,200 --> 00:00:42,410
One is a CSS file for styling and then the JavaScript file because this section is about CSS or HTML.

10
00:00:42,440 --> 00:00:46,220
That is why I always provide all these files for you.

11
00:00:46,490 --> 00:00:49,160
So our focus is on what?

12
00:00:49,160 --> 00:00:52,810
How we can add event to an element.

13
00:00:52,820 --> 00:00:59,930
So because of that inside the JavaScript file tune, I have provided a starter code for you.

14
00:01:00,020 --> 00:01:03,980
And this is what you call selecting of an element.

15
00:01:04,660 --> 00:01:08,530
And for this one, too, we have talked about it before.

16
00:01:08,980 --> 00:01:14,560
So the focus for this section or this video is to how we can add events.

17
00:01:14,590 --> 00:01:18,070
That is why I provided all these files for you.

18
00:01:18,100 --> 00:01:22,060
So you go through this code line by line, so don't worry.

19
00:01:22,090 --> 00:01:27,710
So if you open the HTML, you're going to see something like this.

20
00:01:27,730 --> 00:01:30,410
So with this one, there is no event.

21
00:01:30,430 --> 00:01:33,070
That are just a HTML like that.

22
00:01:33,070 --> 00:01:36,070
So let's see how we can add events.

23
00:01:36,100 --> 00:01:40,720
So before we continue on, let's look at the structure here of our HTML.

24
00:01:40,960 --> 00:01:47,320
See, first we have our heading here, which is this message called mouse event.

25
00:01:47,320 --> 00:01:51,760
And I have a dev with an empty text.

26
00:01:51,790 --> 00:01:53,840
Do you remember how we can add content?

27
00:01:53,890 --> 00:01:54,280
Right.

28
00:01:54,280 --> 00:01:55,960
So this one is empty.

29
00:01:56,050 --> 00:02:01,420
It means that we are going to add dynamic content inside this particular H1.

30
00:02:01,660 --> 00:02:06,520
And you can see we have a couple of buttons here with the individual class names.

31
00:02:06,520 --> 00:02:15,550
So I have name, the class name or the text according to the type of event that is M live meaning mouse

32
00:02:15,550 --> 00:02:16,690
live event.

33
00:02:16,720 --> 00:02:19,840
This is a mouse meaning mouse out event.

34
00:02:19,840 --> 00:02:26,590
This is m over mouse over event mouse enter event mouse up event mouse move mouse click mouse double

35
00:02:26,590 --> 00:02:29,050
click must be and mouse down event.

36
00:02:29,050 --> 00:02:33,550
So all these are types of event that we are going to talk about.

37
00:02:33,640 --> 00:02:40,690
And down here to I have connected my JavaScript file and the same as mine CSS.

38
00:02:40,690 --> 00:02:45,160
I have connected my CSS file, so let's get started.

39
00:02:45,160 --> 00:02:47,170
So let's open the JavaScript file.

40
00:02:47,200 --> 00:02:49,900
This is where we are going to make our hands dirty.

41
00:02:50,080 --> 00:02:53,020
So first, what is mouse event?

42
00:02:53,020 --> 00:02:59,320
Mouse event is any event triggered by the mouse and we have couple of them.

43
00:02:59,320 --> 00:03:03,280
The first one is what we call mouse event.

44
00:03:03,280 --> 00:03:09,610
So come down here are going to be types of events.

45
00:03:09,970 --> 00:03:16,360
And the first one we talk about is called mouse down event.

46
00:03:16,360 --> 00:03:19,600
So mouse die event is being triggered.

47
00:03:19,600 --> 00:03:25,750
When the mouse is pressed down again, when the mouse is pressed down, it means that the event will

48
00:03:25,750 --> 00:03:26,560
be triggered.

49
00:03:26,560 --> 00:03:36,160
So let's start with Mouse Live, which is the first one mouse lives that we have selected an element

50
00:03:36,160 --> 00:03:37,720
with a class m live.

51
00:03:37,720 --> 00:03:40,520
So check it out here inside our html.

52
00:03:40,720 --> 00:03:44,350
This is what we have selected mouse live.

53
00:03:44,350 --> 00:03:47,890
So let's get into the most important part of it.

54
00:03:47,920 --> 00:03:48,550
Good.

55
00:03:48,550 --> 00:03:54,400
So how can we add event to an element which is very important?

56
00:03:54,550 --> 00:03:57,460
How can we add event to an element?

57
00:03:57,460 --> 00:04:06,280
So the elements that we have selected, remember, we have access to the type property and also other

58
00:04:06,280 --> 00:04:10,390
properties, for example, the event listener.

59
00:04:10,630 --> 00:04:16,839
So any element that we select, we have what is called add event listener method.

60
00:04:16,839 --> 00:04:22,600
And for that method that's what's going to be triggered or take in the type of event.

61
00:04:22,600 --> 00:04:24,340
So let me show you what I mean here.

62
00:04:24,340 --> 00:04:28,990
So the element that we have selected, which is mouse live event.

63
00:04:29,170 --> 00:04:30,610
So let me scroll up here.

64
00:04:31,510 --> 00:04:32,130
Great.

65
00:04:32,140 --> 00:04:34,590
So when I make a piece of dirt, you see that?

66
00:04:34,600 --> 00:04:43,870
Then I type in a event listener and you can see this is a method on this particular object and we have

67
00:04:43,870 --> 00:04:50,820
access to these events or methods because of what is called prototype inheritance.

68
00:04:50,830 --> 00:04:53,230
Don't worry about this technical term here.

69
00:04:53,260 --> 00:05:01,450
The take away here is that any element that we select, we have these methods call add event listener,

70
00:05:01,480 --> 00:05:04,660
and this one you call it as a function.

71
00:05:05,260 --> 00:05:09,670
So let's see the requirement for using ADD Event Listener.

72
00:05:10,060 --> 00:05:13,690
This method takes in two argument.

73
00:05:13,840 --> 00:05:23,440
One is the type of event and two is the callback function that you want to run when the event is being

74
00:05:23,440 --> 00:05:24,160
triggered.

75
00:05:24,820 --> 00:05:30,340
So the type of event you are going to pass in is called Miles Down.

76
00:05:30,400 --> 00:05:33,880
And this kind of event, they are all lower casing.

77
00:05:33,880 --> 00:05:37,950
So could it can be single code or double code.

78
00:05:37,960 --> 00:05:42,100
So the first equipment takes in the event type.

79
00:05:42,280 --> 00:05:49,720
The first one going to be a mouse mouse live as that mouse leaves.

80
00:05:49,990 --> 00:05:54,400
And then second element is a callback function for this one too.

81
00:05:54,430 --> 00:05:59,110
We can make use of normal function or using arrow function.

82
00:05:59,110 --> 00:06:03,100
So let's go by normal function way I that.

83
00:06:03,100 --> 00:06:11,410
So inside my function body I can console.log any text here and it says that mouse.

84
00:06:12,650 --> 00:06:13,580
Leave.

85
00:06:13,620 --> 00:06:14,300
Great.

86
00:06:14,300 --> 00:06:19,430
So when I save this one, now let's check the browser and open the console.

87
00:06:19,940 --> 00:06:22,980
Now click on console and then let's refresh it.

88
00:06:23,000 --> 00:06:26,480
I think I have some store network here to refresh it.

89
00:06:26,480 --> 00:06:27,890
Don't worry about this one.

90
00:06:28,010 --> 00:06:28,400
Good.

91
00:06:28,400 --> 00:06:29,630
So now let's see.

92
00:06:29,630 --> 00:06:36,440
The event says that when I move my mouse connect and I leave my mouse, the event will be triggered.

93
00:06:36,440 --> 00:06:41,510
So put your AI inside this console as soon as I move my mouse on the button.

94
00:06:41,510 --> 00:06:42,140
Nothing.

95
00:06:42,140 --> 00:06:42,770
Okay.

96
00:06:42,770 --> 00:06:44,870
But when I leave, it will see that.

97
00:06:44,870 --> 00:06:46,850
Yes, mouse live.

98
00:06:47,120 --> 00:06:49,130
That's what we have here.

99
00:06:49,430 --> 00:06:53,720
So with this one being in mind, we can display a text here.

100
00:06:53,810 --> 00:07:01,210
Remember how we can add content to the dome using the HTML or using the text content.

101
00:07:01,220 --> 00:07:10,220
That is why we have this element without a text, meaning we are going to add dynamic content into it.

102
00:07:10,430 --> 00:07:16,910
And for this one we have selected here core and MSG Elements Line number 12.

103
00:07:17,360 --> 00:07:24,080
So it means that when being selected here, I can add the text to the DOM.

104
00:07:24,470 --> 00:07:24,980
Right?

105
00:07:24,980 --> 00:07:26,180
So come here.

106
00:07:26,180 --> 00:07:34,610
We can see that I will take my message element dot I can use in a HTML or I can use text content.

107
00:07:34,610 --> 00:07:37,070
So let's use text content for this one.

108
00:07:37,310 --> 00:07:41,360
So it is equal to and I can add any text I want to display.

109
00:07:41,360 --> 00:07:42,560
I can say that.

110
00:07:42,590 --> 00:07:44,040
Yeah.

111
00:07:44,360 --> 00:07:44,960
For this one.

112
00:07:44,960 --> 00:07:45,770
Yeah.

113
00:07:46,010 --> 00:07:46,400
Great.

114
00:07:46,400 --> 00:07:47,810
So let's check it out.

115
00:07:47,900 --> 00:07:52,790
So when I refresh my page, then I move my mouse.

116
00:07:52,790 --> 00:07:54,230
When I leave we see that.

117
00:07:54,230 --> 00:07:54,830
I see.

118
00:07:54,860 --> 00:07:55,700
Yeah.

119
00:07:55,700 --> 00:07:56,300
Here.

120
00:07:56,330 --> 00:08:02,810
So we can add any text you want, for example, you release or you have released a mouse.

121
00:08:02,810 --> 00:08:04,550
So here of writing this.

122
00:08:04,550 --> 00:08:10,550
Yeah, I can say that you have released.

123
00:08:13,070 --> 00:08:13,970
The mouse.

124
00:08:14,270 --> 00:08:16,490
And here you can add an emoji.

125
00:08:16,550 --> 00:08:23,450
If you are on mark, you can press on function key and then you're going to see the emoji being pop

126
00:08:23,450 --> 00:08:23,870
up.

127
00:08:23,960 --> 00:08:29,840
But if you don't have that functionality, you can go to any website that gives free emoji.

128
00:08:29,850 --> 00:08:31,850
So let me give you one for this one, too.

129
00:08:31,850 --> 00:08:39,770
We have talked about it before under a HTML, how we can use a icons or emojis so we can go to cool

130
00:08:39,770 --> 00:08:41,580
symbols, dotcom.

131
00:08:41,600 --> 00:08:51,380
And for this one, we have access to a lot of icons, so sorry emojis and icons as well or entities.

132
00:08:51,380 --> 00:08:57,510
So you scroll down here and then let's say you want to select this one, just click on that and copy

133
00:08:57,560 --> 00:09:01,310
and that is also come here and put it here and that is it.

134
00:09:01,310 --> 00:09:08,450
So let's see when I move my mouse and leave a you have released the mouse and emoji is happy.

135
00:09:09,500 --> 00:09:10,190
Great.

136
00:09:10,190 --> 00:09:14,210
That is the first event called Mouse Live.

137
00:09:14,450 --> 00:09:15,950
I think the text is wrong.

138
00:09:15,950 --> 00:09:17,660
Not you have released.

139
00:09:17,690 --> 00:09:18,620
Yeah, it can be.

140
00:09:18,620 --> 00:09:20,390
But let's make it more descriptive.

141
00:09:20,390 --> 00:09:22,670
We can see that you left the element.

142
00:09:22,670 --> 00:09:24,680
Yeah, you left the elements.

143
00:09:24,680 --> 00:09:26,960
You left the elements.

144
00:09:26,960 --> 00:09:27,980
The text doesn't matter.

145
00:09:27,980 --> 00:09:29,960
It can be anything of your choice.

146
00:09:30,050 --> 00:09:33,830
That is the first event called Mouse Live.

147
00:09:34,070 --> 00:09:39,560
The next type of event number two is going to be mouse app.

148
00:09:40,010 --> 00:09:42,590
Mouse App event.

149
00:09:42,830 --> 00:09:50,300
So mouse app event simply means that when you release the mouse, meaning the mouse is not up, in that

150
00:09:50,300 --> 00:09:52,130
case the event will be triggered.

151
00:09:52,130 --> 00:09:55,100
So the same syntax and.

152
00:09:56,130 --> 00:10:04,260
Message sorry it's going to be the element is mouse app this one this one mouse up here so if you check

153
00:10:04,260 --> 00:10:08,400
here we have the mouse up line number 18.

154
00:10:08,490 --> 00:10:09,960
Now we have selected that.

155
00:10:09,960 --> 00:10:13,770
So here I'll come here and say Mouse.

156
00:10:14,480 --> 00:10:18,700
Mouse app and then add event listener.

157
00:10:18,710 --> 00:10:27,890
Again, the event is called mouse app or lowercase and let me use a real function also this time around

158
00:10:27,890 --> 00:10:30,470
here to have good blending.

159
00:10:31,250 --> 00:10:36,560
So here we can consider that look the let's say mouse app.

160
00:10:39,330 --> 00:10:43,260
Mounts up, the mounts up is this one.

161
00:10:43,710 --> 00:10:50,550
When I click and then I release my mouse and see that click after clicking, then release your finger.

162
00:10:50,580 --> 00:10:51,840
The event will be triggered.

163
00:10:51,840 --> 00:10:54,420
That's why you see what is called Mouse app.

164
00:10:54,510 --> 00:10:57,450
So for this one to let me give you a challenge.

165
00:10:57,450 --> 00:11:00,510
You can play around with it and display any text of your choice.

166
00:11:00,540 --> 00:11:02,270
Let me bring this one here.

167
00:11:03,300 --> 00:11:04,770
And then put down here.

168
00:11:05,250 --> 00:11:05,670
All right.

169
00:11:05,670 --> 00:11:20,790
So for this one, we can say that you release or you have you have released the mouse and then let me

170
00:11:20,790 --> 00:11:23,940
use any emoji so you can use any emoji of your choice.

171
00:11:23,940 --> 00:11:25,170
Bring this one here.

172
00:11:25,250 --> 00:11:25,860
Has that.

173
00:11:25,860 --> 00:11:26,790
So check it out.

174
00:11:26,940 --> 00:11:29,280
Now click the console here.

175
00:11:29,310 --> 00:11:30,540
Now mouse app.

176
00:11:30,540 --> 00:11:34,680
When I click and release, you see that you have released the mouse.

177
00:11:34,680 --> 00:11:35,670
That is it.

178
00:11:35,670 --> 00:11:40,380
So the next main event type is called Mouse Enter.

179
00:11:40,530 --> 00:11:45,810
It means that as soon as I entered into the element, for example, you see the mouse enter, as soon

180
00:11:45,810 --> 00:11:53,460
as I move my mouse inside, it's meaning I have entered into that button so I can follow or trigger

181
00:11:53,460 --> 00:11:54,540
in the event.

182
00:11:54,540 --> 00:11:56,040
So here we go.

183
00:11:56,190 --> 00:11:59,100
So now that we know the format, let's move fast here.

184
00:11:59,130 --> 00:12:00,240
Copy this one.

185
00:12:00,860 --> 00:12:02,000
Paste it here.

186
00:12:02,120 --> 00:12:07,760
Here is number three and here is mouse enter.

187
00:12:08,590 --> 00:12:12,760
And here the difference here is going to be as what, Miles.

188
00:12:13,910 --> 00:12:17,750
Enter and they say Mouse enter here.

189
00:12:20,590 --> 00:12:23,380
Mouse entered the message.

190
00:12:23,380 --> 00:12:29,730
I can see that you could say that you have entered the element or you entered the element.

191
00:12:29,740 --> 00:12:31,780
So here you.

192
00:12:32,510 --> 00:12:34,190
And the.

193
00:12:35,060 --> 00:12:35,840
Elements.

194
00:12:36,410 --> 00:12:38,930
Now, let's save it now and check it out.

195
00:12:38,960 --> 00:12:40,670
Let's clear the console.

196
00:12:40,850 --> 00:12:45,560
And now when I move my mouse into the button, the event should be triggered by.

197
00:12:45,560 --> 00:12:47,270
Why is it that is not triggered?

198
00:12:47,300 --> 00:12:50,030
Well, it means that there is something wrong somewhere.

199
00:12:50,240 --> 00:12:50,990
Oh, sorry.

200
00:12:50,990 --> 00:12:56,990
We are targeting this Pattern Mouse app, but instead supposed to be mouse entered.

201
00:12:57,080 --> 00:12:59,060
This one mouse entered.

202
00:12:59,240 --> 00:13:00,980
So this is what we are targeting.

203
00:13:00,980 --> 00:13:01,550
This one.

204
00:13:01,550 --> 00:13:04,780
So let's change to mouse enter.

205
00:13:04,790 --> 00:13:06,030
So come here.

206
00:13:06,050 --> 00:13:08,000
I and going to be am.

207
00:13:10,180 --> 00:13:11,050
Enter.

208
00:13:11,140 --> 00:13:12,410
Yes, yes, yes.

209
00:13:12,430 --> 00:13:14,580
So let's save it now and check it out.

210
00:13:14,590 --> 00:13:16,030
Let me clear my console.

211
00:13:16,060 --> 00:13:23,710
When I move my mouse into the button, you see that you enter the element and I have that emoji.

212
00:13:24,100 --> 00:13:32,890
But one cool thing I didn't tell you is that for this particular callback, we have access to another

213
00:13:32,900 --> 00:13:36,040
element called E, meaning the event.

214
00:13:36,940 --> 00:13:45,190
So this event, if you console.log it this agreement, it contains any properties concerning the kind

215
00:13:45,190 --> 00:13:46,720
of event being triggered.

216
00:13:46,720 --> 00:13:53,680
So if you console.log the event, let's see the properties we have and sometimes you may need this event

217
00:13:53,680 --> 00:13:55,600
properties to do some logic.

218
00:13:55,600 --> 00:13:56,950
So let's see what we have.

219
00:13:56,980 --> 00:13:59,200
So let's clear my console here.

220
00:13:59,230 --> 00:14:07,450
When I move my mouse into the button, see that I have it down here and I use this idea to develop the

221
00:14:07,600 --> 00:14:11,950
mean background color changer or the mouse position.

222
00:14:11,980 --> 00:14:18,160
You see that we have a lot of properties concerning the event type and then the kind of element it was

223
00:14:18,160 --> 00:14:19,870
triggered on again.

224
00:14:19,870 --> 00:14:23,830
So that's what about the mouse enter?

225
00:14:23,830 --> 00:14:27,520
And you also have what is called mouse over.

226
00:14:27,640 --> 00:14:33,400
And this one is same as I think say mice, the mouse enter because when I move my mask over it, it

227
00:14:33,400 --> 00:14:35,560
is same as what I'm entering into it.

228
00:14:35,560 --> 00:14:37,180
There are some use cases here.

229
00:14:37,510 --> 00:14:40,660
Okay, let's talk about the mouse out event.

230
00:14:40,660 --> 00:14:44,260
So let me copy this one here because the format is the same.

231
00:14:44,350 --> 00:14:46,420
So let me move fast here.

232
00:14:46,930 --> 00:14:48,100
So the same thing.

233
00:14:48,100 --> 00:14:56,920
I have selected the mouse out element, which is mouse out is this one, do you get it?

234
00:14:56,920 --> 00:15:04,210
And now I added my event listener pass in my event type and my callback function and I just console.log

235
00:15:04,210 --> 00:15:08,260
this and change the text to you are out of the element.

236
00:15:08,260 --> 00:15:11,590
I start right because now you know how to select, right?

237
00:15:11,590 --> 00:15:13,210
So pardon me for that.

238
00:15:13,210 --> 00:15:14,860
So let me clear the console.

239
00:15:14,950 --> 00:15:17,170
Is it mouse out?

240
00:15:17,440 --> 00:15:19,510
This is the mouse out event.

241
00:15:19,510 --> 00:15:20,230
Have a look.

242
00:15:20,470 --> 00:15:25,300
When I move my mouse into it, nothing seems to be happening.

243
00:15:25,300 --> 00:15:30,310
But when I move my mouth out, you can see that you are out of the element.

244
00:15:30,310 --> 00:15:34,450
That is what you call the mouse out event.

245
00:15:34,870 --> 00:15:38,020
Then that's going to be the mouse move event.

246
00:15:38,020 --> 00:15:41,560
So let me copy this one to then give you here.

247
00:15:41,630 --> 00:15:44,710
I start the same syntax by different elements.

248
00:15:44,740 --> 00:15:52,130
I selected the mouse move, have an event called Mouse Move and then console locate and then change

249
00:15:52,130 --> 00:15:54,220
the text to so mouse move.

250
00:15:54,250 --> 00:16:02,830
Let's see the element type we have, which is mouse move, mouse move, mouse move, mouse move.

251
00:16:03,070 --> 00:16:03,880
Which yeah.

252
00:16:03,910 --> 00:16:06,160
Line number 19, mouse move.

253
00:16:06,220 --> 00:16:09,280
So let's see, let's refresh it.

254
00:16:09,280 --> 00:16:10,600
And where is my mouse?

255
00:16:10,600 --> 00:16:11,860
Move this one.

256
00:16:11,860 --> 00:16:12,550
Okay.

257
00:16:12,670 --> 00:16:16,810
When I move my mouse into it, it is that you are moving the mouse.

258
00:16:16,840 --> 00:16:18,580
The height is eight guys.

259
00:16:18,820 --> 00:16:22,300
So and we can also add a click event.

260
00:16:22,300 --> 00:16:26,440
The difference here is know the event type and that is all.

261
00:16:26,530 --> 00:16:29,170
And I'll give you a link to explore more.

262
00:16:29,170 --> 00:16:34,840
The types of events when it comes to mount to differentiate is know this one and that is going for this

263
00:16:34,840 --> 00:16:37,300
one too you can make reference to it.

264
00:16:37,300 --> 00:16:42,610
So the lastly or let's say last batch one is let me give you what is called the Click Event.

265
00:16:42,610 --> 00:16:50,460
You see that I have selected the mouse click and then pass in the event type click and then I just console.log

266
00:16:50,500 --> 00:16:54,010
text to the console or better still you can display a text to the screen.

267
00:16:54,010 --> 00:16:55,300
The choice is yours.

268
00:16:55,300 --> 00:17:02,260
Let me click on the mouse, click see that I get the event mouse click and event type being displayed

269
00:17:02,260 --> 00:17:03,070
down here.

270
00:17:03,430 --> 00:17:04,060
All right.

271
00:17:04,060 --> 00:17:09,369
So the same thing applies to the mouse wheel and then the double click and the other one.

272
00:17:09,369 --> 00:17:14,619
So let me copy those events for you and then you can play around with it, right?

273
00:17:14,619 --> 00:17:18,400
So come down here and paste it.

274
00:17:18,940 --> 00:17:24,190
They are more events apart from this ones, so you can explore more at a free time.

275
00:17:24,190 --> 00:17:28,660
So basically this is how the mouse event works.

276
00:17:28,660 --> 00:17:32,710
The next video, let's get continue with it.

277
00:17:32,740 --> 00:17:34,720
Keyboard event.