All language subtitles for 182 Adding Event Listeners with jQuery.en_US

All right.

So the next thing that we want to explore is how do you add event listeners to our HTML elements using

jQuery.

Well, as you'll come to see, this is way way easier than using vanilla Javascript.

And let's start by adding an event listener to our h1.

So we're going to go into our index.js, and we're going to again use jQuery by typing the dollar

sign, and then we're going to wrap the thing that we're looking for which is the h1,

and now all we need to do is say .click, and that will add an event listener and call this callback function

once it detects a click.

So inside here we're again going to target the h1, and then we're going to change its

CSS from that horrible yellow color to maybe a slightly nicer color.

Let's try purple.

All right.

Now let's hit save and refresh and once I click on the h1, bam. Looks a lot nicer, right? Now

the other pain that we had previously is that if we wanted to add an event listener to all five buttons

we had to write a for loop

if we only had Javascript in our toolset. So we had to write something like for (var i = 0;

i<5; i++)

and then inside the for loop we searched through the document for querySelectorAll to select all of

the buttons, and the selector is of course “button”, and then we used this index

i to add event listener.

And then the event listener that we were looking for was the click listener.

And then once that was detected we called the callback function and we target the document.querySelector,

not All, just querySelector for the h1, .style.color = “purple”.

All right.

So this is our code without Javascript.

Just make sure that there's no typos like what I've got here.

And remember that Atom is here to help.

So you'll notice that the color of a function that it doesn't know about is kind of this light blue, whereas

if it knows about it then it colors it kind of turquoise, slightly more green.

Admittedly the difference is not large.

All right. So let's fix this typo.

And that changes the color highlighting.

And now if I hit save and refresh if I click on one of these buttons or any of these buttons it will

change my text to purple.

Now let me show you how much easier it is to do this using jQuery.

So we're going to select our buttons by using the jQuery selector, and then we're going to say .click

just as we did before.

And then we're going to bind our callback function to it and we're going to update our h1

to change its color to purple.

So you might notice that we're not bothering with a for loop here, because by selecting for button, jQuery

will look through your web site and select all of the buttons, and if you combine that with a click

method then it will add this click listener to all the buttons that it finds without you having to

go through it using a for loop.

So let's delete this and hit save and let me show you how it works exactly the same even though our

code is now a lot shorter.

So aside from the click listener, we can also bind a keypress event listener.

So, for example, if we go into our index.html and we add an input and we hit save then you can see

that we've now got a text box.

Now if we want to start detecting for keystrokes inside that text box, then we can use jQuery to do

that by targeting the input and adding the keypress event, and once a keypress is detected then we

want to log that event inside our console.

So we'll just use the console.log to show us what the event.key property was,

so which key got pressed.

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

we've got k showing up here, or t,

or d, or

hit enter,

anything you wish, and that is how we can detect it.

Now if you wanted to do what we did in the drumkit whereby you're adding the keypress event listener to

the entire document,

it’s as easy as either changing this to the body that we're selecting or we can simply just delete the

quotation marks and put document in here which selects the entire document.

So now once I click inside the web site then you can see that my keystrokes are also being logged. Now,

as a challenge,

I want you to update the code that we wrote just now so that whenever I press a key inside our web site

it gets shown inside the h1.

So pause the video and see if you can complete that challenge.

All right. So that shouldn't have been too difficult because all we need to do is instead of logging

the event.key, we just need to select our h1 and change its text using the text method to the

event.key.

And we looked at this in previous lessons where we looked at how we can manipulate text using jQuery.

So if that's at all unfamiliar then make sure that you remind yourself by going back there.

All right. Now let's hit save and refresh and you can see that whenever I type anything in my keyboard

it gets shown up in the h1.

So the next thing I want to show you is that instead of using .keypress or .click functions,

there’s actually an even more flexible way of adding an event listener.

We can simply use the method on.

And this takes two parameters.

The first one is the event that you're looking to listen for and that can be any of the events that

we had access to by using Javascript.

So, for example, let's look for something like mouseover. So we can select our h1 and we're going

to detect for mouseover events.

And when it does happen then this is the second parameter which is going to be the callback function.

And when we do detect a mouseover event on our h1, then we'll change our h1’s color

to purple.

All right. Let’s hit save and refresh.

And now we can mouseover our h1 to change its

CSS.

Now if you wanted to you can of course also detect for click instead of mouseover,

so click events, or any of the events that are listed in the MDN docs for our events for the DOM

events.