OK we'll come back.
So we have one less method that I want to talk about.
As I mentioned in the introduction video to J Korea events the on method is what we'll be using.
Ninety nine percent of the time it's by far the most used Jay queery event method.
OK.
So let's talk about how it works on is very similar to the vanilla.
Yes an event listener.
Obviously it's a lot shorter.
It's just two characters but it behaves in a similar way where we give it the name of the event that
we want to listen for it.
So unlike click or key press which only will fire on one type of an event click or a keypress on allows
us to specify if we're doing a click like we're doing here submit on click or if we're doing a double
click like I have here button on double click or a drag start or a key press so it can take the place
of all of the things you've already seen with click and key press and all the other methods here.
There's a ton of them like scroll and submit and toggle key press creeky up key down.
All of that can be done with just the on method.
It works pretty much the same way though where we need to select something with dollar sign first.
So I'll show you an example here.
We select something in this case all the teachers inside of the body inside of something with the idea
of data table and then we run it on and then the type of the event.
So this is new compared to click and key press which only take a callback function.
We have to specify what event we're listening for.
So click in this case and then comma the callback function.
We want to be run.
So let's try this out to refresh my page.
My AJ quarried demo.
So we have no click listeners so no clicks we have no keypresses.
Nothing happens on our buttons either.
Let's go and try and add some quick listeners first.
Let's change the color of the H-1 when we click on it.
So we need to select each one and then we're going to do on the first argument is the event type which
is quick and then our callback function.
And inside the callback function if we wanted to change the color of the H-1 we could do something like
this where we just say H-1 gutsiest us Color Purple and see if you can think of why this might be a
problem.
So I'll hit enter and it works just fine it turns purple but I'm going to copy this code and refresh
the page and I'm going to add in another H-1 three of them and save.
Now we have three H-1.
And if I run this code again says any H-1 when we click on it change all h ones to be purple.
So I'll try that.
They all change to purple which maybe is a feature that we want but most of the time we want to affect
the one item that we click on.
So to do that all refresh we need to use the keyword this and remember it needs to be the J query wrapper
for this.
So dollar sign parentheses this and that refers to the one H-1 or the one thing that was clicked on
.
And now if I hit enter and I try clicking only the correct H-1 changes to purple.
OK so that's how we can use on to do a click.
Now let's see how to use it for a key press.
So we'll select our input
like that dot on and then we'll add key press and the second argument is the callback function and we'll
just do a simple conses log.
So cancel the log key pressed just like that and we'll hit enter.
Now if I go type a key in here I get he pressed every time I type a key.
Let's try one more type of event here I'll refresh.
Let's do something when we hover over a button.
We'll change the font to be bolded when I hover.
So we need to first select all the buttons just like that and then add our on.
And the event that we'll use is called Mouse enter.
Just like that.
And we'll start with just cancelled out logging when the mouse enters.
So we'll do a built log mouse enter like that.
And now if I hover over I get a mouse enter just like that.
And it's only when we first enter the element.
So it doesn't keep triggering over and over until I leave and come back.
OK.
So when we do mouse enter we're not going to want to constantly log.
We're going to want to select the J very wrapper for this and do the SS too bold something we need to
change the font weight.
So fun ways and we'll make that fold just like that and hit enter.
Now if I hover it's hard to see what it changes to be bold.
Of course it stays bold it never changes back.
So we could add that feature by doing the same thing with button on mouse leave which is another event
and then rather than changing it to font weight.
Bold.
We can change it back to normal just like that.
Now if I leave it goes back to normal.
And if I enter as bold I leave it's normal.
So this is how we could do something with javascript to do a sort of like hover selection effect.
However with CSSA now we can easily do that without any javascript at all with the hover pseudo selector
.
And I just wanted to demonstrate that there are other events out there.
So all the events that we could use with an event listener we can use with on which makes it really
really useful.
As I mentioned we'll be using it all the time.
So there is one last point I'd like to make about on and as an example I'm going to use.
Click and on.
Click and talk about how they are slightly different.
So they they both will generally work for you.
They'll add a quick listener but there is a small difference which is that click will only add click
listeners for elements that are on the page at that time.
And the on click will add listeners for all future elements or potential future elements.
So this will make sense when you make the to do list.
But basically we need to use dot on click rather than click because we're going to have to do's that
are added to the page that aren't there when the page loads a user types into a form and hits enter
.
And that will make a new to do and we want those new to do to have their own click listeners.
So we need to use on again that will make more sense when we actually started to do list.