0
1
00:00:00,780 --> 00:00:01,110
All right.
1

2
00:00:01,110 --> 00:00:08,340
So the next thing that we want to explore is how do you add event listeners to our HTML elements using
2

3
00:00:08,340 --> 00:00:09,310
jQuery.
3

4
00:00:09,570 --> 00:00:14,500
Well, as you'll come to see, this is way way easier than using vanilla Javascript.
4

5
00:00:14,640 --> 00:00:18,340
And let's start by adding an event listener to our h1.
5

6
00:00:18,480 --> 00:00:25,140
So we're going to go into our index.js, and we're going to again use jQuery by typing the dollar
6

7
00:00:25,140 --> 00:00:30,970
sign, and then we're going to wrap the thing that we're looking for which is the h1,
7

8
00:00:31,190 --> 00:00:40,140
and now all we need to do is say .click, and that will add an event listener and call this callback function
8

9
00:00:40,320 --> 00:00:42,560
once it detects a click.
9

10
00:00:42,810 --> 00:00:49,140
So inside here we're again going to target the h1, and then we're going to change its
10

11
00:00:49,170 --> 00:00:55,810
CSS from that horrible yellow color to maybe a slightly nicer color.
11

12
00:00:55,830 --> 00:00:57,970
Let's try purple.
12

13
00:00:57,970 --> 00:00:58,290
All right.
13

14
00:00:58,290 --> 00:01:05,750
Now let's hit save and refresh and once I click on the h1, bam. Looks a lot nicer, right? Now
14

15
00:01:05,760 --> 00:01:12,450
the other pain that we had previously is that if we wanted to add an event listener to all five buttons
15

16
00:01:12,930 --> 00:01:14,840
we had to write a for loop
16

17
00:01:14,880 --> 00:01:23,340
if we only had Javascript in our toolset. So we had to write something like for (var i = 0;
17

18
00:01:23,500 --> 00:01:27,920
i<5; i++)
18

19
00:01:27,990 --> 00:01:39,120
and then inside the for loop we searched through the document for querySelectorAll to select all of
19

20
00:01:39,120 --> 00:01:43,770
the buttons, and the selector is of course “button”, and then we used this index
20

21
00:01:43,770 --> 00:01:47,300
i to add event listener.
21

22
00:01:47,520 --> 00:01:51,630
And then the event listener that we were looking for was the click listener.
22

23
00:01:51,930 --> 00:01:59,830
And then once that was detected we called the callback function and we target the document.querySelector,
23

24
00:02:01,350 --> 00:02:11,420
not All, just querySelector for the h1, .style.color = “purple”.
24

25
00:02:11,420 --> 00:02:11,780
All right.
25

26
00:02:11,790 --> 00:02:15,570
So this is our code without Javascript.
26

27
00:02:15,570 --> 00:02:20,170
Just make sure that there's no typos like what I've got here.
27

28
00:02:20,220 --> 00:02:23,140
And remember that Atom is here to help.
28

29
00:02:23,160 --> 00:02:29,490
So you'll notice that the color of a function that it doesn't know about is kind of this light blue, whereas
29

30
00:02:29,490 --> 00:02:33,920
if it knows about it then it colors it kind of turquoise, slightly more green.
30

31
00:02:33,930 --> 00:02:36,210
Admittedly the difference is not large.
31

32
00:02:36,210 --> 00:02:39,650
All right. So let's fix this typo.
32

33
00:02:40,560 --> 00:02:42,330
And that changes the color highlighting.
33

34
00:02:42,330 --> 00:02:50,130
And now if I hit save and refresh if I click on one of these buttons or any of these buttons it will
34

35
00:02:50,130 --> 00:02:52,940
change my text to purple.
35

36
00:02:52,950 --> 00:02:57,470
Now let me show you how much easier it is to do this using jQuery.
36

37
00:02:57,780 --> 00:03:05,250
So we're going to select our buttons by using the jQuery selector, and then we're going to say .click
37

38
00:03:05,490 --> 00:03:07,080
just as we did before.
38

39
00:03:07,290 --> 00:03:15,220
And then we're going to bind our callback function to it and we're going to update our h1
39

40
00:03:18,330 --> 00:03:23,050
to change its color to purple.
40

41
00:03:23,100 --> 00:03:30,150
So you might notice that we're not bothering with a for loop here, because by selecting for button, jQuery
41

42
00:03:30,150 --> 00:03:37,350
will look through your web site and select all of the buttons, and if you combine that with a click
42

43
00:03:37,530 --> 00:03:44,340
method then it will add this click listener to all the buttons that it finds without you having to
43

44
00:03:44,370 --> 00:03:47,690
go through it using a for loop.
44

45
00:03:47,850 --> 00:03:55,980
So let's delete this and hit save and let me show you how it works exactly the same even though our
45

46
00:03:55,980 --> 00:03:58,290
code is now a lot shorter.
46

47
00:03:58,590 --> 00:04:03,840
So aside from the click listener, we can also bind a keypress event listener.
47

48
00:04:03,840 --> 00:04:13,350
So, for example, if we go into our index.html and we add an input and we hit save then you can see
48

49
00:04:13,350 --> 00:04:15,400
that we've now got a text box.
49

50
00:04:15,420 --> 00:04:21,900
Now if we want to start detecting for keystrokes inside that text box, then we can use jQuery to do
50

51
00:04:21,900 --> 00:04:33,480
that by targeting the input and adding the keypress event, and once a keypress is detected then we
51

52
00:04:33,480 --> 00:04:38,030
want to log that event inside our console.
52

53
00:04:38,040 --> 00:04:45,990
So we'll just use the console.log to show us what the event.key property was,
53

54
00:04:46,140 --> 00:04:48,130
so which key got pressed.
54

55
00:04:48,360 --> 00:04:58,410
So now if I hit save and refresh, if I go in here and I type something like, I don’t know, k, then you can see that
55

56
00:04:58,410 --> 00:05:02,000
we've got k showing up here, or t,
56

57
00:05:02,170 --> 00:05:04,050
or d, or
57

58
00:05:04,140 --> 00:05:05,460
hit enter,
58

59
00:05:05,460 --> 00:05:08,480
anything you wish, and that is how we can detect it.
59

60
00:05:08,490 --> 00:05:14,370
Now if you wanted to do what we did in the drumkit whereby you're adding the keypress event listener to
60

61
00:05:14,370 --> 00:05:15,820
the entire document,
61

62
00:05:15,840 --> 00:05:23,160
it’s as easy as either changing this to the body that we're selecting or we can simply just delete the
62

63
00:05:23,160 --> 00:05:28,000
quotation marks and put document in here which selects the entire document.
63

64
00:05:28,350 --> 00:05:35,550
So now once I click inside the web site then you can see that my keystrokes are also being logged. Now,
64

65
00:05:35,640 --> 00:05:36,710
as a challenge,
65

66
00:05:36,720 --> 00:05:42,810
I want you to update the code that we wrote just now so that whenever I press a key inside our web site 
66

67
00:05:43,410 --> 00:05:46,950
it gets shown inside the h1.
67

68
00:05:46,950 --> 00:05:52,080
So pause the video and see if you can complete that challenge.
68

69
00:05:52,080 --> 00:05:57,120
All right. So that shouldn't have been too difficult because all we need to do is instead of logging
69

70
00:05:57,180 --> 00:06:07,410
the event.key, we just need to select our h1 and change its text using the text method to the 
70

71
00:06:07,450 --> 00:06:08,150
event.key.
71

72
00:06:08,380 --> 00:06:14,210
And we looked at this in previous lessons where we looked at how we can manipulate text using jQuery.
72

73
00:06:14,340 --> 00:06:19,560
So if that's at all unfamiliar then make sure that you remind yourself by going back there.
73

74
00:06:19,620 --> 00:06:26,610
All right. Now let's hit save and refresh and you can see that whenever I type anything in my keyboard
74

75
00:06:27,090 --> 00:06:30,090
it gets shown up in the h1.
75

76
00:06:30,180 --> 00:06:37,110
So the next thing I want to show you is that instead of using .keypress or .click functions,
76

77
00:06:37,110 --> 00:06:41,480
there’s actually an even more flexible way of adding an event listener.
77

78
00:06:41,700 --> 00:06:44,550
We can simply use the method on.
78

79
00:06:44,760 --> 00:06:46,420
And this takes two parameters.
79

80
00:06:46,440 --> 00:06:51,900
The first one is the event that you're looking to listen for and that can be any of the events that
80

81
00:06:51,900 --> 00:06:54,400
we had access to by using Javascript.
81

82
00:06:54,630 --> 00:07:03,240
So, for example, let's look for something like mouseover. So we can select our h1 and we're going
82

83
00:07:03,240 --> 00:07:06,780
to detect for mouseover events.
83

84
00:07:06,780 --> 00:07:13,570
And when it does happen then this is the second parameter which is going to be the callback function.
84

85
00:07:13,880 --> 00:07:20,660
And when we do detect a mouseover event on our h1, then we'll change our h1’s color
85

86
00:07:23,470 --> 00:07:25,590
to purple.
86

87
00:07:25,600 --> 00:07:27,710
All right. Let’s hit save and refresh.
87

88
00:07:27,710 --> 00:07:31,910
And now we can mouseover our h1 to change its
88

89
00:07:31,910 --> 00:07:33,120
CSS.
89

90
00:07:33,190 --> 00:07:38,770
Now if you wanted to you can of course also detect for click instead of mouseover,
90

91
00:07:39,010 --> 00:07:46,750
so click events, or any of the events that are listed in the MDN docs for our events for the DOM
91

92
00:07:46,780 --> 00:07:47,360
events.