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