Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video we'll use event handlers for the focus and blur events.
DOM and Event Listeners
element.addEventListener( eventType, callback );
eventType could be a keyboard key press or a mouse event lick a mouse click. 'focus' is the event when the cursor appears in a text input or text area, when the user looses 'focus' the 'blur' event is triggered.
An event callback looks like this:
function ( event ) {
// Do something
}
Or...
event => {
// Do something
}
The event object has a type property for the type of event that triggered the callback and a target property for the element from the event object.
-
0:00
You should already be somewhat familiar with adding event listeners to the dom.
-
0:05
Here's a refresher.
-
0:06
An element has a method called addEventListener.
-
0:10
It takes two arguments, the first, the event type.
-
0:14
The event type can range from a mouse click to
-
0:17
when a user loses focus on a text field.
-
0:20
Secondly, the callback of the event handler, which is a function
-
0:24
that gets executed when the matching event is triggered by the computer.
-
0:29
Here's what en event handler looks like, written as a regular function or
-
0:33
an error function.
-
0:34
It's a function that has one argument, the event object.
-
0:38
The event update has a number of properties.
-
0:41
The most important ones are type and target.
-
0:45
Type lets you know, as the developer, what type of event triggered the call back.
-
0:50
Target is the element that the event was triggered on.
-
0:54
This allows you to use the same callback for multiple types of events or elements.
-
0:59
We'll see more about this later.
-
1:02
Here's the app we're building.
-
1:03
We have a form with an input field and a text area.
-
1:07
Our job is to apply the highlight class name to the input field and
-
1:11
text area when the user gives focus to these elements.
-
1:15
When the user navigates away from the elements or
-
1:17
loses focus, it should remove the highlight class name.
-
1:23
The highlight class name gives this gold outline to the elements.
-
1:29
Launch the work space with this video.
-
1:32
In the appjs file, we have two elements selected,
-
1:36
the name input and the message text area field.
-
1:41
We'll work with the name input field first.
-
1:44
Let's add a click listener to the nameInput.
-
1:52
First I call the addEventListener method.
-
1:57
Then I pass in the event type, click.
-
2:01
And then then the event handler.
-
2:09
Now we can apply the class name of highlight to the event target.
-
2:23
Remember that target is the element that triggered the event.
-
2:27
Save the file and test it.
-
2:33
When we click in the field,
-
2:35
we see that the field is highlighted with the highlight class.
-
2:39
But there are other ways to enter into a text field, for
-
2:43
example, when you press the tab key and when you jump from field to field.
-
2:48
When you use the tab key the click event doesn't get triggered.
-
2:53
Let me show you.
-
2:54
When I refresh the page and hit tab, the highlight class isn't applied.
-
3:00
When I click in it, the highlight class is applied.
-
3:04
When you see the cursor appear in a text field,
-
3:07
the text field is described as being in focus.
-
3:11
This is also an event that we can use, the focus event.
-
3:16
Let's update click to the focus event.
-
3:22
Preview and hit tab and the highlight class is applied.
-
3:27
When a field loses focus it triggers the blur event.
-
3:32
Let's remove the class name on the blur event.
-
3:36
I'll copy and paste the focus event and
-
3:41
replace focus with blur.
-
3:49
And the empty string for the class name.
-
3:52
Save and preview.
-
3:56
And now, when I tab around the form the highlight gets applied.
-
4:02
It also works when I click.
-
4:05
When it uses focus, the highlight class is removed.
-
4:10
Here's the challenge for the next video.
-
4:12
Apply the highlight class on the focus event for the text area.
-
4:17
And remove the highlight class on the blur event.
-
4:21
I'll show you how I did it with some optimizations that you can perform, too.
You need to sign up for Treehouse in order to download course files.
Sign up