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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Using Callbacks on Text Inputs

4:26 with Andrew Chalkley

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up