1
00:00:00,090 --> 00:00:03,150
All right guys in the last video we took a look at the mouse events.

2
00:00:03,150 --> 00:00:08,670
Now we're going to look at some input in form events so let's go ahead and create a couple of variables

3
00:00:08,880 --> 00:00:09,600
here.

4
00:00:09,630 --> 00:00:16,740
I don't agree when called form and I want to set it to document door queries selector and I'm just going

5
00:00:16,740 --> 00:00:19,950
to select it by the form tag.

6
00:00:19,950 --> 00:00:24,570
Now it's important to mention that if you have a big application with multiple forms you're going to

7
00:00:24,570 --> 00:00:30,730
want to be more specific than just form you know use the idea or the class or something like that.

8
00:00:30,780 --> 00:00:32,540
In this case we only have one form.

9
00:00:32,550 --> 00:00:34,300
So that's fine.

10
00:00:34,350 --> 00:00:41,880
I also want to create a task input variable and set that to document Daut and let's use get element

11
00:00:41,880 --> 00:00:48,360
by the for this one we haven't used that in a while because this input has an IDF task.

12
00:00:48,630 --> 00:00:54,930
If we look at the input right here it has an ID of tasks so we're grabbing it by that.

13
00:00:54,930 --> 00:01:05,500
So let's take this form and let's add an event list into it and let's listen for a submit event and

14
00:01:05,500 --> 00:01:09,120
then we're going to call run event which we're going to create down here

15
00:01:15,500 --> 00:01:19,610
and then we're going to do the same thing that we did in the last video.

16
00:01:19,640 --> 00:01:28,510
We're going to say event type and just set that to e door type.

17
00:01:28,700 --> 00:01:29,130
OK.

18
00:01:29,180 --> 00:01:31,560
We'll be sure to pass in here.

19
00:01:32,190 --> 00:01:39,830
So now if we go ahead and save and we click add tasks you see we get event type submit.

20
00:01:40,170 --> 00:01:47,130
Now a lot of times when you submit a form it will actually redirect to the same page it's not doing

21
00:01:47,130 --> 00:01:52,110
it here and I am pretty sure it's because it has something to do with the materialized javascript.

22
00:01:52,110 --> 00:01:53,620
But usually it does.

23
00:01:53,760 --> 00:01:57,950
So what I'm going to do is I'm going to give this form in action.

24
00:01:58,470 --> 00:02:05,220
So when I say action and we'll just set it to index on HP.

25
00:02:05,240 --> 00:02:11,370
All right so if we do that and we submit it's going to it it fires off the event and it's going to do

26
00:02:11,370 --> 00:02:16,850
console log watch down here in a flash real quick and then it gets redirected.

27
00:02:16,860 --> 00:02:22,410
So that's the default behavior of a form just like with a link the default behavior is to to redirect

28
00:02:22,410 --> 00:02:23,940
to that Tref.

29
00:02:24,120 --> 00:02:31,130
So to stop that from happening would just to prevent default or prevent defaults.

30
00:02:31,140 --> 00:02:36,540
Now even though the action goes to index Pietsch P If I click it's not going to redirect it's going

31
00:02:36,540 --> 00:02:38,940
to stop that behavior from happening.

32
00:02:38,940 --> 00:02:44,860
All right so usually when you do a submit you're going to you're going to want to use this all right.

33
00:02:44,860 --> 00:02:50,200
Another thing you usually want to do when you submit a form is get the input fields get the value.

34
00:02:50,200 --> 00:03:00,880
So what we would do here is let's do console log and we'll set task input which is this input here.

35
00:03:00,910 --> 00:03:08,650
We already have it in a variable and then we want to get the value so dot value and save and the default

36
00:03:08,680 --> 00:03:11,590
is walk the dog if I submit we get walked the dog.

37
00:03:11,590 --> 00:03:15,360
If I put something else in here and submit we get that value.

38
00:03:15,690 --> 00:03:16,860
OK.

39
00:03:17,170 --> 00:03:20,800
Now we already have a hard coded value of walk the dog.

40
00:03:20,800 --> 00:03:23,840
I could just easily remove that from here.

41
00:03:24,070 --> 00:03:31,390
But if you want to clear out your form from javascript's what you can do is take the input variable

42
00:03:31,390 --> 00:03:38,220
here task input and just do dot value equals nothing and save and that will get rid of it.

43
00:03:38,260 --> 00:03:44,130
So this is something that you often run after you submit a form so that you clear it out OK.

44
00:03:44,170 --> 00:03:49,330
For instance when we make this into an application and we add a task we're going to want this to clear

45
00:03:49,330 --> 00:03:51,990
out and that's how we do it.

46
00:03:52,280 --> 00:04:02,460
Set clear and put right down here will say Get input value.

47
00:04:03,370 --> 00:04:14,250
And now what I'm going to do is just common out this stuff and then comment how.

48
00:04:14,620 --> 00:04:21,430
I guess you know will comment that now I want to take a look at some events that we can run on the actual

49
00:04:21,430 --> 00:04:23,650
input not not the form.

50
00:04:23,650 --> 00:04:31,000
So we're going to say task in Dot dog eventless center and we're going to look at the event key down

51
00:04:32,370 --> 00:04:36,730
K key down and then we're going to call run event.

52
00:04:36,730 --> 00:04:41,860
And just like with mouse down it fires off when your key actually goes down.

53
00:04:41,860 --> 00:04:48,330
So if I press you'll see that it fires off and it just keeps firing off as I type.

54
00:04:48,350 --> 00:04:48,720
All right.

55
00:04:48,720 --> 00:04:53,720
Now you may want to catch the input from each key down.

56
00:04:53,740 --> 00:05:03,300
So what we can do here is we can console dot log and we can say Target member target is the element

57
00:05:03,310 --> 00:05:06,840
the event happens on which in this case is the input.

58
00:05:06,850 --> 00:05:09,250
Now the value is whatever we're typing in.

59
00:05:09,250 --> 00:05:16,720
So if we say the target doesn't value and save and then we type you can see it's going to log everything

60
00:05:16,720 --> 00:05:18,050
we type.

61
00:05:18,190 --> 00:05:18,510
All right.

62
00:05:18,510 --> 00:05:23,380
And we can take this a step further and I'll put that somewhere on the screen so if we want to take

63
00:05:24,370 --> 00:05:37,640
actually you know what we'll do is we'll set a variable called Hedding set it to do query selector H5.

64
00:05:37,990 --> 00:05:40,270
So we're going to grab this H5 right here.

65
00:05:40,270 --> 00:05:48,970
And when I want to do is I'll put whatever we type into here so we'll say heading Daut

66
00:05:51,330 --> 00:06:01,550
exits to heading dot inner text and set that to the DOT target dot value and save.

67
00:06:01,550 --> 00:06:07,060
And now when I type you can see that the heading will actually include whatever I type.

68
00:06:07,150 --> 00:06:08,780
Which is kind of neat.

69
00:06:09,280 --> 00:06:13,050
It's kind of like a data binding and angular.

70
00:06:13,050 --> 00:06:13,620
All right.

71
00:06:13,630 --> 00:06:20,500
And you can see that through this course you're going to see things that you kind of give you the foundation

72
00:06:20,500 --> 00:06:24,700
of how some of these other frameworks work under the hood.

73
00:06:24,700 --> 00:06:26,090
All right I'm going to comment that.

74
00:06:26,140 --> 00:06:29,460
I just wanted to show you that we can do stuff like that.

75
00:06:30,370 --> 00:06:32,430
So let's take a look at another event.

76
00:06:32,440 --> 00:06:39,260
I'm just going to put a comment in here this is key down in addition to key down we have keyed up.

77
00:06:39,700 --> 00:06:48,710
So it's copy that and comment that no changes to keep up.

78
00:06:49,250 --> 00:06:54,820
K now key up is going to do the same thing except it's when you release the key if I am going to just

79
00:06:54,880 --> 00:07:00,690
hit down the letter K no event I let go and there it is Chiappe OK.

80
00:07:00,730 --> 00:07:09,410
So it's just it just fires off when you lift the key up OK and in addition to that we also have key

81
00:07:09,410 --> 00:07:10,190
press

82
00:07:15,050 --> 00:07:17,060
which is just kind of a generalized

83
00:07:20,060 --> 00:07:23,070
generalized key event.

84
00:07:23,240 --> 00:07:31,790
So as soon as I press it it fires off I'm going to comment this so to say we're not logging everything.

85
00:07:32,060 --> 00:07:34,140
All right so that's key press.

86
00:07:34,640 --> 00:07:35,070
Let's see.

87
00:07:35,070 --> 00:07:37,460
So now those are those are the key events.

88
00:07:37,460 --> 00:07:50,480
We have some other input events like focus so I will say task input had event listener to focus or for

89
00:07:50,480 --> 00:07:54,880
focus and we'll call run event.

90
00:07:55,380 --> 00:07:55,760
OK.

91
00:07:55,760 --> 00:08:02,450
Now focus is when you click inside of an input and you set it to the focus mode.

92
00:08:02,450 --> 00:08:06,600
So I'm just going to click in here and we get event type focus.

93
00:08:06,800 --> 00:08:09,940
Now the opposite of that would be blur.

94
00:08:10,430 --> 00:08:14,660
OK when you look outside of an input so let's go ahead and say blur

95
00:08:17,170 --> 00:08:17,740
comment.

96
00:08:17,760 --> 00:08:24,970
So if I click in and then click out when we click out we get the blur of it.

97
00:08:25,520 --> 00:08:30,670
OK we also have cut and paste are actually events.

98
00:08:30,670 --> 00:08:36,280
So I'll say cut change this to cut.

99
00:08:36,620 --> 00:08:42,800
And now if I put something in here and I go ahead and I right click and cut that fires off the event

100
00:08:43,220 --> 00:08:52,410
if I do a control Z that also it should fire it off.

101
00:08:52,450 --> 00:08:55,780
See control Z.

102
00:08:56,300 --> 00:08:59,100
I guess that doesn't fire it off.

103
00:09:01,200 --> 00:09:03,160
Oh I'm sorry control x.

104
00:09:03,840 --> 00:09:04,390
Try that.

105
00:09:04,390 --> 00:09:06,190
So control X that doesn't work.

106
00:09:06,190 --> 00:09:06,840
All right.

107
00:09:07,150 --> 00:09:15,730
Control Z is actually Paiste in speaking of pace that is also an event so go ahead and do that.

108
00:09:21,550 --> 00:09:22,630
So go ahead here.

109
00:09:22,640 --> 00:09:24,340
And all right clicking paste.

110
00:09:24,580 --> 00:09:31,240
And you see we get event type paste if I do a control control of z is not paste.

111
00:09:31,270 --> 00:09:34,430
What does control Z.

112
00:09:34,550 --> 00:09:36,750
I think I'm having kind of a brain fart here.

113
00:09:36,750 --> 00:09:40,490
What does controls the undo.

114
00:09:40,620 --> 00:09:41,170
That's right.

115
00:09:41,220 --> 00:09:42,420
So undo.

116
00:09:43,110 --> 00:09:48,150
So control of the paste that will fire off the event as well.

117
00:09:48,150 --> 00:09:56,040
All right so another thing that we have here that we can use on inputs is the actual input event and

118
00:09:56,040 --> 00:10:02,240
what that does is it will fire off on any kind of input event.

119
00:10:02,240 --> 00:10:12,660
All right so let's go ahead let's copy this and it's going to change this to input and just go ahead

120
00:10:12,660 --> 00:10:15,880
and start typing of the event type input.

121
00:10:15,880 --> 00:10:16,260
All right.

122
00:10:16,260 --> 00:10:18,530
If I were to cut.

123
00:10:18,870 --> 00:10:20,120
That's also an input.

124
00:10:20,130 --> 00:10:22,550
If I were to paste that's an input.

125
00:10:22,590 --> 00:10:22,940
OK.

126
00:10:22,950 --> 00:10:28,040
Anything we do with this input is going to fire off with this event.

127
00:10:28,040 --> 00:10:28,440
OK.

128
00:10:28,440 --> 00:10:31,990
Or with this with this with this type.

129
00:10:32,100 --> 00:10:32,400
All right.

130
00:10:32,400 --> 00:10:39,750
Now I also want to mention the change event and this is we use this on a select list so we don't have

131
00:10:39,750 --> 00:10:43,790
a select list so I'm just going to put one in here real quick.

132
00:10:45,350 --> 00:10:47,900
You don't need a name and an ID.

133
00:10:48,460 --> 00:10:49,910
So we'll do select.

134
00:10:49,990 --> 00:10:54,130
Let's put in a couple options here.

135
00:10:54,370 --> 00:10:59,020
Just two 1 2 3 1 two 3.

136
00:10:59,020 --> 00:11:04,480
Now if I save this you're not going to see it because with materialize you actually need to add a little

137
00:11:04,480 --> 00:11:10,120
bit of jay queering at the bottom to be able to see the select list just because of how it works.

138
00:11:10,120 --> 00:11:16,740
So what I'm going to do just for this example is disable materialized by just commenting out the C access

139
00:11:17,200 --> 00:11:20,600
just so we can see the actual select right here.

140
00:11:20,620 --> 00:11:20,940
All right.

141
00:11:20,950 --> 00:11:27,900
And then we're going to go to our script and we're going to say Konst select and let's say document

142
00:11:28,300 --> 00:11:29,550
queries select or

143
00:11:33,160 --> 00:11:40,860
select and then down here this is going to be a change event.

144
00:11:41,140 --> 00:11:48,120
So say select Daut add event listener.

145
00:11:48,340 --> 00:11:54,190
We're going to listen for a change and then we're going to do run event.

146
00:11:54,310 --> 00:12:01,590
All right so now if I go over here and I go ahead and change it to two we get event type change change

147
00:12:01,620 --> 00:12:08,180
to three event type change and we should be able to get the value forgotten.

148
00:12:08,290 --> 00:12:10,020
Uncomment Yes.

149
00:12:10,240 --> 00:12:14,780
And now if I choose to you can see we can get that to 3.

150
00:12:14,800 --> 00:12:17,800
We can get that 3 right.

151
00:12:18,010 --> 00:12:20,990
So I'm going to just get rid of that select.

152
00:12:21,040 --> 00:12:21,550
I'm sorry.

153
00:12:21,580 --> 00:12:22,410
Get rid of the Select.

154
00:12:22,410 --> 00:12:25,570
I'm going to uncomment that.

155
00:12:25,570 --> 00:12:26,850
So we have our style back.

156
00:12:26,860 --> 00:12:29,890
But I just wanted to show you that real quick as well.

157
00:12:30,400 --> 00:12:34,650
All right guys so I think that's going to be it for now in the next video we're going to talk about.

158
00:12:34,660 --> 00:12:41,530
Event bubbling and event delegation which are really important parts of javascript and the whole event

159
00:12:41,530 --> 00:12:42,070
system.