Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Callback Functions in JavaScript

Well done!

You have completed Callback Functions in JavaScript!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Using Callbacks on Text Inputs

4:26 with Andrew Chalkley

In this video, we'll use event handlers for the focus and blur events.

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 object 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 app.js file, we have two elements selected, 1:32
the nameInput and the messageTextArea field. 1:36
We'll work with the nameInput 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 loses 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