Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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 error 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