Let's register an event listener whenever we click into an input element.
And instead of using an input element,
let's use a text area.
And let's use a different type of selector.
So this is going to have a name of my text area.
And when I view the page, it's just a text area.
Nothing happens. Now this is going to work with an input area,
an input element, just like it's going to work for a text area element.
So first things first, let's go ahead and select this.
Now we can select this by a text area,
but we can also select this by an attribute.
And we can say the attribute and it starts like this.
Brackets name is equal to my text area,
and this is a different type of selector and this works in CSS as well.
Dot on focus, function,
console.log you focused into and this text area.
And so when we refresh the page,
as soon as I click into it to type something,
it says you focus into this text area.
It's not a hover.
Notice how it doesn't trigger when I put my mouse over it,
only when I click into it.
And so that is basically all there is to focusing.
This is also going to work for an input.
So we could do an input.
And input doesn't have a closing tag and it doesn't also have rows ID,
or it could have an idea,
but it's not going to have rows or columns.
Let's like both of those and call it and my input.
And so now we're selecting an input by its name attribute.
We're saying on focus,
you focused into this input area.
Let's go ahead and give this a shot.
And when I put my mouse over it and nothing happens
when I click into it and it gets triggered.
But when i type, it's not triggered.
And so the only thing that's happening here
is when I put my mouse over it and click into it.
So I'm ready to type.
Now if you're wondering, where on earth would I possibly use this great question.
You know, when you're on
an app and it asks you for your email address or something and your keyboard is hidden.
Well, you click into that section or you put your thumb into that section,
you tap it, and then your keyboard sides up.
That is a good,
very good example of an on focus event.
Please go ahead and give this a shot.
Create a focus event.
This is very, very similar to mouse enter,
mouse leave, click, and so on.
So this should start to feel a little more
familiar to you in the next lesson when you're ready.
Let's talk about what happens when you leave an element.
So we talked about when you focus in,
what happens when you focus out.