All right. 1
So the next thing that we want to explore is how do you add event listeners to our HTML elements using 2
jQuery. 3
Well, as you'll come to see, this is way way easier than using vanilla Javascript. 4
And let's start by adding an event listener to our h1. 5
So we're going to go into our index.js, and we're going to again use jQuery by typing the dollar 6
sign, and then we're going to wrap the thing that we're looking for which is the h1, 7
and now all we need to do is say .click, and that will add an event listener and call this callback function 8
once it detects a click. 9
So inside here we're again going to target the h1, and then we're going to change its 10
CSS from that horrible yellow color to maybe a slightly nicer color. 11
Let's try purple. 12
All right. 13
Now let's hit save and refresh and once I click on the h1, bam. Looks a lot nicer, right? Now 14
the other pain that we had previously is that if we wanted to add an event listener to all five buttons 15
we had to write a for loop 16
if we only had Javascript in our toolset. So we had to write something like for (var i = 0; 17
i<5; i++) 18
and then inside the for loop we searched through the document for querySelectorAll to select all of 19
the buttons, and the selector is of course “button”, and then we used this index 20
i to add event listener. 21
And then the event listener that we were looking for was the click listener. 22
And then once that was detected we called the callback function and we target the document.querySelector, 23
not All, just querySelector for the h1, .style.color = “purple”. 24
All right. 25
So this is our code without Javascript. 26
Just make sure that there's no typos like what I've got here. 27
And remember that Atom is here to help. 28
So you'll notice that the color of a function that it doesn't know about is kind of this light blue, whereas 29
if it knows about it then it colors it kind of turquoise, slightly more green. 30
Admittedly the difference is not large. 31
All right. So let's fix this typo. 32
And that changes the color highlighting. 33
And now if I hit save and refresh if I click on one of these buttons or any of these buttons it will 34
change my text to purple. 35
Now let me show you how much easier it is to do this using jQuery. 36
So we're going to select our buttons by using the jQuery selector, and then we're going to say .click 37
just as we did before. 38
And then we're going to bind our callback function to it and we're going to update our h1 39
to change its color to purple. 40
So you might notice that we're not bothering with a for loop here, because by selecting for button, jQuery 41
will look through your web site and select all of the buttons, and if you combine that with a click 42
method then it will add this click listener to all the buttons that it finds without you having to 43
go through it using a for loop. 44
So let's delete this and hit save and let me show you how it works exactly the same even though our 45
code is now a lot shorter. 46
So aside from the click listener, we can also bind a keypress event listener. 47
So, for example, if we go into our index.html and we add an input and we hit save then you can see 48
that we've now got a text box. 49
Now if we want to start detecting for keystrokes inside that text box, then we can use jQuery to do 50
that by targeting the input and adding the keypress event, and once a keypress is detected then we 51
want to log that event inside our console. 52
So we'll just use the console.log to show us what the event.key property was, 53
so which key got pressed. 54
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
we've got k showing up here, or t, 56
or d, or 57
hit enter, 58
anything you wish, and that is how we can detect it. 59
Now if you wanted to do what we did in the drumkit whereby you're adding the keypress event listener to 60
the entire document, 61
it’s as easy as either changing this to the body that we're selecting or we can simply just delete the 62
quotation marks and put document in here which selects the entire document. 63
So now once I click inside the web site then you can see that my keystrokes are also being logged. Now, 64
as a challenge, 65
I want you to update the code that we wrote just now so that whenever I press a key inside our web site 66
it gets shown inside the h1. 67
So pause the video and see if you can complete that challenge. 68
All right. So that shouldn't have been too difficult because all we need to do is instead of logging 69
the event.key, we just need to select our h1 and change its text using the text method to the 70
event.key. 71
And we looked at this in previous lessons where we looked at how we can manipulate text using jQuery. 72
So if that's at all unfamiliar then make sure that you remind yourself by going back there. 73
All right. Now let's hit save and refresh and you can see that whenever I type anything in my keyboard 74
it gets shown up in the h1. 75
So the next thing I want to show you is that instead of using .keypress or .click functions, 76
there’s actually an even more flexible way of adding an event listener. 77
We can simply use the method on. 78
And this takes two parameters. 79
The first one is the event that you're looking to listen for and that can be any of the events that 80
we had access to by using Javascript. 81
So, for example, let's look for something like mouseover. So we can select our h1 and we're going 82
to detect for mouseover events. 83
And when it does happen then this is the second parameter which is going to be the callback function. 84
And when we do detect a mouseover event on our h1, then we'll change our h1’s color 85
to purple. 86
All right. Let’s hit save and refresh. 87
And now we can mouseover our h1 to change its 88
CSS. 89
Now if you wanted to you can of course also detect for click instead of mouseover, 90
so click events, or any of the events that are listed in the MDN docs for our events for the DOM 91
events.