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 website 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 website 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 website
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.