OK we'll come back.
So far we've talked about how we can select the elements with J Querrey and also how we can manipulate
them.
Now we're going to introduce the final big missing piece which is events in J query.
So think back to vanilla J.S..
When we added event listeners we used a method called an event listener.
Well it turns out that Jay where he has a ton of methods that have to do with events.
So I have the event section open on Jake where he can get there by just clicking on events here.
So as I scroll through here you can see just how many.
Coria event methods there are chikor it comes with a ton of them.
So what I'm going to do is highlight the three most important ones the three that you can use.
Ninety nine percent of the time those three methods are quick key press and on.
And I said that these three you could use 99 percent of the time.
It's actually more like this one right here.
You can use 99 percent of the time.
So I'm going to show you click and key press first but my main objective is to show you how awesome
the method is.
So let's get started.
So Jay equerries quick method is how we can very quickly and easily add a click listener to a single
element or a collection of elements.
So you can see I have two examples in this case.
I'm selecting something and then adding a click listener with a click.
So we select something with the idea of submit we run.
Click on it and then we pass in a callback function and this callback function will be run when something
with the idea of submit is clicked.
And because it's an ID there's only one on the page.
So when that one item is clicked this code is run.
If you take a look down here you can see that I'm selecting all buttons on the page which it could be
one.
It could be 10 buttons and I'm adding a click listener to all of them.
So any time a button is quick it will alert someone click the button.
So let me demonstrate that.
Now I have a simple HTL page with Jay queery included as a CDN.
And I'm going to add in let's do Jay query events and I will add in a few buttons.
So the first one I say don't correct me.
And then the next one will say seriously ok me.
And the last one will say this is your last warning.
So we'll save and open this in the browser and always just check that J loaded.
OK.
Looks good.
So we'll start easy here by adding a quick listener to this H-1 and there's only one on the page.
So we just need to select first with dollar sign.
So one that gives us the right H-1 which only one and then we run.
Don't click on that and then we need to pass in a callback function which will be run whenever we click
on that H-1.
So behind the scenes click is using an event listener and it's adding a click listener on this H-1 and
we can either do an anonymous function which is way more common to see but somewhat more intimidating
for newer students or we could write a named function separately and then pass the name of that function
in here.
But like I said anonymous functions are way more common.
So what we want to do is just alert each one correct and I'll hit enter here and now if I click on this
H-1 you'll see I get H-1 quit and that doesn't happen on any other element.
It does happen over here remember because my H-1 goes all the way across the screen so that CSSA issue
if I want to change the size of the one but it only happens when I do click on the one element.
Now what I want to do is show how we can add a quick listener to a collection of elements.
So I'm going to select all buttons here.
So a dollar sign button and then we add our click just like that and we can pass in an anonymous function
again as our callback.
And this will be run whenever any button is clicked and we'll just do an alert button click just like
that and hit enter.
And now if I click on any of those buttons there we go button clicked button click button quit.
So think back to vanilla javascript to add an event listener to a collection of buttons.
I would have to select them all with query selector all or get elements by tag name and then I would
have to use a for loop to loop through all of them and then I would have to individually add an event
listener which to be clear is happening behind the scenes.
But all I have to do is write this line and that will loop for me that will add the event listeners
individually which makes her life really easy rather than just a learning button clicked.
What if I wanted to change the style change the background color of the button that was clicked.
So I would need to add a click listener again.
I'm just at the up arrow and rather than alerting.
What we'll do is change the background color so that's going to be something that C-s s background and
we'll change it to be pink.
So the issue is what are we calling Dotsie CSSA on and back with vanilla javascript.
We would use this.
The key word this and that refers to the element that was clicked on however NJ query that won't quite
work what we need to do is use the J Querrey version of this.
This is always a little bit of a confusing idea.
I think it helps to remember that what Shakeri does is it takes plain vanilla Yes and it wraps it in
Jay query and it's big J.A.G. hug and it gives it some special properties and methods.
So if we want to use dot CSSA which is a J query method we have to make sure that we're running it on
a J query object.
So just plain old this is the regular vanilla javascript this.
So we need to wrap it and tell it this is the J query version.
So let's test that out.
Hit enter here and now let's click on the button first we have that alert because we never got rid of
this first click listener.
And then the background changes to pink and you can see that will happen to each one that I click.
We could also do something like this.
So I hit the up arrow and I refresh the page rather than just changing them to be pink.
We could also do a cancel that log and Walcott's adult log the text of the button that was clicked.
So it would be something like you clicked plus and then I'll make a variable to store this so variable
text equals dollar sign this dot and to get that text out of there we just need to use the text method
just like that kaso that log you clicked us text which is our variable name and enter.
And now if I click one you clicked don't click me you clicked.
This is your last warning.
And you clicked.
Seriously don't click me.
OK.
So that's all I'll demonstrate about.
Click.
To summarize we can add a listener to one element at a time like we did for the H-1.
Or we can do it to a collection which is where it really becomes useful.
And then lastly if we want to refer to the element that was clicked we need to use dollar sign this
which is the J queery wrapper the J.A.G. version of the Vanilla.
Yes this