Let's talk about the keyup event.
In the keyup event we have like an input.
And let's give this a class of select me and a default value of thing here.
Now, hello world, or they got better.
And so we need to select this by its class or,
you know, we just like to bites attribute.
We could select it by its element type.
We get selected by all sorts of things,
but let's go ahead and select it by its class.
Then we can say dot on key up, function, console.log.
You pressed KI.
And so let's go ahead and refresh our page.
And when we go in here, do,
do, do, do, do, do, do.
Every time I press a key,
it log something in my code so you can see them spamming it down here.
And that's all there is to it. And so at this point if you're thinking,
wow, Kayla, this, this is just like the same thing over and over again.
You're absolutely right.
It's the nice thing about jQuery is once you learn one thing,
it's very similar to all the other things.
And so it makes learning jQuery really easy.
It also makes writing JavaScript really easy.
Now let's say you want it to get the value out of this.
This is going to get very interesting, so it's actually delete that.
And how did we get this value? We have two ways. We can get this value.
We can say const,
let's do input is equal to the selected me.
And then we could do console.log and we can log that input dot val.
Now we already know about val.
So this is going to work for us.
Let's go ahead and refresh this.
And so it works for us the way we expect it to work.
The problem here is you now have one selector here,
and every time you press a key on your keyboard,
it's going to traverse your DOM is going to look through,
let's say, 10 thousand lines of HTML and try to find this.
And believe it or not,
even though it is pretty fast,
browsers aren't really that fast.
There's a lot of information to go through and you want to be performed with your code.
And especially if we're trying to get a job as a web developer.
So instead, what we do is we can,
because we're using function and if you're coming from JavaScript,
whenever you use function,
you have access to the, this keyword.
We can use selector, this dot val.
And this val simply refers to whatever is being selected here.
And so let's go ahead and console.log this Console.log, this dot val.
And when I refresh hello world.
And this is working better and it's technically fastest, technically more performing.
Now what happens if we have another input element with the same class name?
And this one just has different text.
Is it going to select both of these?
And then when you do a key up on either one of them,
is it going to get the value of both of them together
or is he going to get the value of just the one you're typing in?
These are questions we need to ask ourselves.
Let's go ahead and refresh.
And HelloWorld 123.
And let's go into the type and here, 123.
So it is completely siloed from the other ones,
which is really nice now behind the scenes,
all it's doing is selecting all of these as nodes.
So this is a node and this node and it's registering the keyup event on each of them.
And so even though the selector is being fancy and selecting two things,
our event listener behind the scene is actually
registering a different event listener for each of these.
And so they are completely separate from each other.
Now as a quick little recap,
we have our selector, so we selected an input element here.
We said dot on up,
That is our EventListener.
Then we have a function.
And in that function,
we just console log this dot val.
And this is the key takeaway here.
This, we are not using this dot val because dot val doesn't exist on the this keyword.
We're going to throw in this into a,
another jQuery selector and then use dot valid
because dot val exists on the selector in jQuery,
not in vanilla JavaScript,
this is a jQuery thing.
And so we need to wrap this in a,
in a jQuery selector.
I would like you to give this a shot.
And I want you to tinker around with the,
this property, the, this keyword.
It only works when you use a function.
So if you're writing modern JavaScript
and you use an arrow function, this may or may not work.
I implore you to try this out, see what happens.
But typically you want this element.
And I'm saying this specifically.
So this element is registered into this function.
And then we use this keyword to tie it all together.
Go ahead and give that a shot.
Try creating a key up event listener when you were done,
let's talk about what happens when you click into any event,
not into an event into a particular input.
So when I click into it or when I click out of it, what happens?