1
00:00:00,000 --> 00:00:02,430
Let's talk about the keyup event.

2
00:00:02,430 --> 00:00:06,110
In the keyup event we have like an input.

3
00:00:06,105 --> 00:00:15,105
And let's give this a class of select me and a default value of thing here.

4
00:00:15,105 --> 00:00:18,815
Now, hello world, or they got better.

5
00:00:18,810 --> 00:00:24,120
And so we need to select this by its class or,

6
00:00:24,120 --> 00:00:25,980
you know, we just like to bites attribute.

7
00:00:25,980 --> 00:00:27,990
We could select it by its element type.

8
00:00:27,990 --> 00:00:29,610
We get selected by all sorts of things,

9
00:00:29,610 --> 00:00:32,340
but let's go ahead and select it by its class.

10
00:00:32,340 --> 00:00:40,730
Then we can say dot on key up, function, console.log.

11
00:00:40,725 --> 00:00:43,955
You pressed KI.

12
00:00:44,080 --> 00:00:46,700
And so let's go ahead and refresh our page.

13
00:00:46,700 --> 00:00:47,860
And when we go in here, do,

14
00:00:47,855 --> 00:00:48,955
do, do, do, do, do, do.

15
00:00:48,950 --> 00:00:50,560
Every time I press a key,

16
00:00:50,555 --> 00:00:54,395
it log something in my code so you can see them spamming it down here.

17
00:00:55,870 --> 00:01:00,590
And that's all there is to it. And so at this point if you're thinking,

18
00:01:00,590 --> 00:01:03,890
wow, Kayla, this, this is just like the same thing over and over again.

19
00:01:03,890 --> 00:01:05,020
You're absolutely right.

20
00:01:05,015 --> 00:01:08,705
It's the nice thing about jQuery is once you learn one thing,

21
00:01:08,705 --> 00:01:12,385
it's very similar to all the other things.

22
00:01:12,380 --> 00:01:15,970
And so it makes learning jQuery really easy.

23
00:01:15,965 --> 00:01:19,315
It also makes writing JavaScript really easy.

24
00:01:19,310 --> 00:01:21,850
Now let's say you want it to get the value out of this.

25
00:01:21,845 --> 00:01:24,945
This is going to get very interesting, so it's actually delete that.

26
00:01:24,945 --> 00:01:27,975
And how did we get this value? We have two ways. We can get this value.

27
00:01:27,970 --> 00:01:33,490
We can say const,

28
00:01:33,490 --> 00:01:37,740
let's do input is equal to the selected me.

29
00:01:37,735 --> 00:01:43,795
And then we could do console.log and we can log that input dot val.

30
00:01:43,795 --> 00:01:45,295
Now we already know about val.

31
00:01:45,295 --> 00:01:46,485
So this is going to work for us.

32
00:01:46,480 --> 00:01:48,860
Let's go ahead and refresh this.

33
00:01:49,410 --> 00:01:53,870
And so it works for us the way we expect it to work.

34
00:01:54,120 --> 00:01:58,360
The problem here is you now have one selector here,

35
00:01:58,360 --> 00:02:01,590
and every time you press a key on your keyboard,

36
00:02:01,585 --> 00:02:04,845
it's going to traverse your DOM is going to look through,

37
00:02:04,840 --> 00:02:08,660
let's say, 10 thousand lines of HTML and try to find this.

38
00:02:08,820 --> 00:02:11,080
And believe it or not,

39
00:02:11,080 --> 00:02:13,600
even though it is pretty fast,

40
00:02:13,600 --> 00:02:16,660
browsers aren't really that fast.

41
00:02:16,660 --> 00:02:20,200
There's a lot of information to go through and you want to be performed with your code.

42
00:02:20,200 --> 00:02:24,200
And especially if we're trying to get a job as a web developer.

43
00:02:24,210 --> 00:02:29,100
So instead, what we do is we can,

44
00:02:29,095 --> 00:02:32,175
because we're using function and if you're coming from JavaScript,

45
00:02:32,170 --> 00:02:33,460
whenever you use function,

46
00:02:33,460 --> 00:02:36,160
you have access to the, this keyword.

47
00:02:36,160 --> 00:02:41,020
We can use selector, this dot val.

48
00:02:41,020 --> 00:02:48,960
And this val simply refers to whatever is being selected here.

49
00:02:48,955 --> 00:02:56,195
And so let's go ahead and console.log this Console.log, this dot val.

50
00:02:56,740 --> 00:03:00,790
And when I refresh hello world.

51
00:03:00,785 --> 00:03:06,955
And this is working better and it's technically fastest, technically more performing.

52
00:03:06,950 --> 00:03:12,920
Now what happens if we have another input element with the same class name?

53
00:03:12,920 --> 00:03:15,830
And this one just has different text.

54
00:03:15,830 --> 00:03:19,930
Is it going to select both of these?

55
00:03:19,925 --> 00:03:22,105
And then when you do a key up on either one of them,

56
00:03:22,100 --> 00:03:24,710
is it going to get the value of both of them together

57
00:03:24,710 --> 00:03:27,890
or is he going to get the value of just the one you're typing in?

58
00:03:27,890 --> 00:03:30,100
These are questions we need to ask ourselves.

59
00:03:30,095 --> 00:03:32,015
Let's go ahead and refresh.

60
00:03:32,015 --> 00:03:35,335
And HelloWorld 123.

61
00:03:35,330 --> 00:03:38,960
And let's go into the type and here, 123.

62
00:03:38,960 --> 00:03:42,320
So it is completely siloed from the other ones,

63
00:03:42,320 --> 00:03:44,170
which is really nice now behind the scenes,

64
00:03:44,165 --> 00:03:47,215
all it's doing is selecting all of these as nodes.

65
00:03:47,210 --> 00:03:51,950
So this is a node and this node and it's registering the keyup event on each of them.

66
00:03:51,950 --> 00:03:56,380
And so even though the selector is being fancy and selecting two things,

67
00:03:56,375 --> 00:03:58,975
our event listener behind the scene is actually

68
00:03:58,970 --> 00:04:02,330
registering a different event listener for each of these.

69
00:04:02,330 --> 00:04:06,020
And so they are completely separate from each other.

70
00:04:06,020 --> 00:04:07,610
Now as a quick little recap,

71
00:04:07,610 --> 00:04:10,850
we have our selector, so we selected an input element here.

72
00:04:10,850 --> 00:04:13,160
We said dot on up,

73
00:04:13,160 --> 00:04:15,190
That is our EventListener.

74
00:04:15,185 --> 00:04:17,035
Then we have a function.

75
00:04:17,030 --> 00:04:18,730
And in that function,

76
00:04:18,725 --> 00:04:21,175
we just console log this dot val.

77
00:04:21,170 --> 00:04:22,840
And this is the key takeaway here.

78
00:04:22,835 --> 00:04:29,665
This, we are not using this dot val because dot val doesn't exist on the this keyword.

79
00:04:29,660 --> 00:04:32,960
We're going to throw in this into a,

80
00:04:32,960 --> 00:04:36,050
another jQuery selector and then use dot valid

81
00:04:36,050 --> 00:04:39,160
because dot val exists on the selector in jQuery,

82
00:04:39,155 --> 00:04:40,685
not in vanilla JavaScript,

83
00:04:40,685 --> 00:04:42,215
this is a jQuery thing.

84
00:04:42,215 --> 00:04:46,375
And so we need to wrap this in a,

85
00:04:46,370 --> 00:04:48,400
in a jQuery selector.

86
00:04:48,395 --> 00:04:50,455
I would like you to give this a shot.

87
00:04:50,450 --> 00:04:52,360
And I want you to tinker around with the,

88
00:04:52,355 --> 00:04:54,665
this property, the, this keyword.

89
00:04:54,665 --> 00:04:57,085
It only works when you use a function.

90
00:04:57,080 --> 00:04:59,690
So if you're writing modern JavaScript

91
00:04:59,690 --> 00:05:03,500
and you use an arrow function, this may or may not work.

92
00:05:03,500 --> 00:05:08,170
I implore you to try this out, see what happens.

93
00:05:08,165 --> 00:05:12,475
But typically you want this element.

94
00:05:12,470 --> 00:05:14,310
And I'm saying this specifically.

95
00:05:14,314 --> 00:05:17,514
So this element is registered into this function.

96
00:05:17,510 --> 00:05:20,980
And then we use this keyword to tie it all together.

97
00:05:20,975 --> 00:05:22,925
Go ahead and give that a shot.

98
00:05:22,925 --> 00:05:26,195
Try creating a key up event listener when you were done,

99
00:05:26,195 --> 00:05:29,765
let's talk about what happens when you click into any event,

100
00:05:29,765 --> 00:05:33,805
not into an event into a particular input.

101
00:05:33,800 --> 00:05:37,680
So when I click into it or when I click out of it, what happens?