1
00:00:00,000 --> 00:00:05,170
Let's register an event listener whenever we click into an input element.

2
00:00:05,210 --> 00:00:07,590
And instead of using an input element,

3
00:00:07,590 --> 00:00:09,090
let's use a text area.

4
00:00:09,090 --> 00:00:11,460
And let's use a different type of selector.

5
00:00:11,460 --> 00:00:17,090
So this is going to have a name of my text area.

6
00:00:17,090 --> 00:00:19,610
And when I view the page, it's just a text area.

7
00:00:19,610 --> 00:00:24,260
Nothing happens. Now this is going to work with an input area,

8
00:00:24,260 --> 00:00:28,580
an input element, just like it's going to work for a text area element.

9
00:00:28,580 --> 00:00:30,620
So first things first, let's go ahead and select this.

10
00:00:30,620 --> 00:00:32,600
Now we can select this by a text area,

11
00:00:32,600 --> 00:00:34,700
but we can also select this by an attribute.

12
00:00:34,700 --> 00:00:37,030
And we can say the attribute and it starts like this.

13
00:00:37,025 --> 00:00:40,615
Brackets name is equal to my text area,

14
00:00:40,610 --> 00:00:44,540
and this is a different type of selector and this works in CSS as well.

15
00:00:44,540 --> 00:00:51,440
Dot on focus, function,

16
00:00:51,439 --> 00:00:58,999
console.log you focused into and this text area.

17
00:00:59,000 --> 00:01:01,960
And so when we refresh the page,

18
00:01:01,955 --> 00:01:05,225
as soon as I click into it to type something,

19
00:01:05,225 --> 00:01:07,445
it says you focus into this text area.

20
00:01:07,445 --> 00:01:08,455
It's not a hover.

21
00:01:08,450 --> 00:01:10,570
Notice how it doesn't trigger when I put my mouse over it,

22
00:01:10,565 --> 00:01:12,715
only when I click into it.

23
00:01:12,710 --> 00:01:16,880
And so that is basically all there is to focusing.

24
00:01:16,880 --> 00:01:19,960
This is also going to work for an input.

25
00:01:19,955 --> 00:01:21,745
So we could do an input.

26
00:01:21,740 --> 00:01:26,740
And input doesn't have a closing tag and it doesn't also have rows ID,

27
00:01:26,735 --> 00:01:28,165
or it could have an idea,

28
00:01:28,160 --> 00:01:30,510
but it's not going to have rows or columns.

29
00:01:31,000 --> 00:01:34,730
Let's like both of those and call it and my input.

30
00:01:34,730 --> 00:01:39,400
And so now we're selecting an input by its name attribute.

31
00:01:39,395 --> 00:01:40,975
We're saying on focus,

32
00:01:40,970 --> 00:01:44,860
you focused into this input area.

33
00:01:44,855 --> 00:01:46,585
Let's go ahead and give this a shot.

34
00:01:46,580 --> 00:01:48,800
And when I put my mouse over it and nothing happens

35
00:01:48,800 --> 00:01:52,400
when I click into it and it gets triggered.

36
00:01:52,400 --> 00:01:57,170
But when i type, it's not triggered.

37
00:01:57,170 --> 00:01:59,540
And so the only thing that's happening here

38
00:01:59,540 --> 00:02:03,260
is when I put my mouse over it and click into it.

39
00:02:03,260 --> 00:02:05,110
So I'm ready to type.

40
00:02:05,105 --> 00:02:10,205
Now if you're wondering, where on earth would I possibly use this great question.

41
00:02:10,205 --> 00:02:12,395
You know, when you're on

42
00:02:12,395 --> 00:02:16,975
an app and it asks you for your email address or something and your keyboard is hidden.

43
00:02:16,970 --> 00:02:20,780
Well, you click into that section or you put your thumb into that section,

44
00:02:20,780 --> 00:02:23,330
you tap it, and then your keyboard sides up.

45
00:02:23,330 --> 00:02:25,030
That is a good,

46
00:02:25,025 --> 00:02:28,975
very good example of an on focus event.

47
00:02:28,970 --> 00:02:30,920
Please go ahead and give this a shot.

48
00:02:30,920 --> 00:02:32,060
Create a focus event.

49
00:02:32,060 --> 00:02:34,420
This is very, very similar to mouse enter,

50
00:02:34,415 --> 00:02:37,355
mouse leave, click, and so on.

51
00:02:37,355 --> 00:02:40,495
So this should start to feel a little more

52
00:02:40,490 --> 00:02:43,700
familiar to you in the next lesson when you're ready.

53
00:02:43,700 --> 00:02:47,950
Let's talk about what happens when you leave an element.

54
00:02:47,945 --> 00:02:50,485
So we talked about when you focus in,

55
00:02:50,480 --> 00:02:53,100
what happens when you focus out.