You learned that there are three basic concepts to making a site interactive. Selection is always the first step. Then you can either manipulate the element directly, or ask it to listen for user actions. Now it's time to learn about the third one, listening for user actions, or events.
At the beginning of this course, 0:00 I mentioned that there were three basic concepts to making a site interactive. 0:01 Selection is always the first step, from there you can either manipulate 0:05 the element directly, or ask it to listen for user actions. 0:09 You've already learned about the first two concepts, so 0:13 now it's time to learn about the third one, listening for user actions or events. 0:15 So the first thing to look at is this headline. 0:21 Remember earlier when I said that events always target an element on the page? 0:23 Well that's what EventTarget is, it's our selected element. 0:28 And if you look at this summary description, 0:32 it says the EventTarget can be an element, a document, or window object. 0:34 So in other words, the EventTarget object is a sort of catchall, 0:40 because there are many kinds of objects that we can set up to listen for events. 0:44 And we'll focus on just a few of them in this course. 0:47 Now, this summary description also says that the EventTarget.addEventListener 0:50 method registers the specified listener on the event target it's called on. 0:56 So this registration sets up the callback 1:01 to fire in response to the specified event. 1:04 And the callback function is often where we will select and 1:06 manipulate elements in the DOM. 1:09 Looking at the Syntax section, we see that addEventListener has three forms. 1:12 And these square brackets here mean that the parameters inside are optional. 1:18 These represent advanced ways of calling the method that we won't worry 1:23 about for now. 1:26 So for our purposes, we can use any of these three forms, 1:27 since they're identical, apart from their optional parameters. 1:30 Now looking at the first parameter, type, it's a string representing the event type. 1:34 Remember all the event types were looked at earlier like click, 1:41 key press, and so on? 1:44 Well any of those event types can be specified here. 1:45 Now after that, we need to specify the listener. 1:49 And in the explanation, it says that it's an object, 1:52 something called Event interface. 1:56 Well, we don't need to worry about this either. 1:58 But the explanation also says that it can simply be a function, and for 2:00 this course that's what we'll be using. 2:05 So to summarize, addEventListener takes an event type and a callback function. 2:07 This callback function is often called an event handler 2:13 because its purpose is to handle events. 2:16 When addEventListener runs, it registers a handler on the event target, 2:19 setting the target up to fire the handler any time that event takes place. 2:23 And we've already been implementing a number of event handlers throughout 2:28 this course, and so far they've been click handlers. 2:31 So now let's see two other mouse events in action, the mouse over and 2:34 mouse out event. 2:38 Over in our workspace, or project files, before doing anything else, 2:41 let's delete the temp.js file, and remove the line in index.html that refers to it. 2:45 So now let's have a look at our page in the browser. 2:53 So for our list of things here, let's capitalize an item when we hover or 2:56 mouse over it, and change it back to lower case when the mouse moves off. 3:01 So to create this behavior, we need to add two listeners to each list item. 3:06 We'll need one that capitalizes the element's text when the mouse enters 3:11 the list item's boundaries. 3:16 And we'll need another one that changes it back when the mouse leaves. 3:17 So let's start by applying the behavior to the first list item, 3:20 then we'll see how to add it to all of them. 3:24 I'll open up app.js, and 3:26 first I'll select all the list items at 3:30 the top of the page with const listItems = 3:35 document.getElementsByTagName(li) And 3:40 again, for now let's just access the first list item using square brackets with a 0. 3:49 And right below, we'll call addEventListener on listItems. 3:56 And as the first argument, I'll type the event that I want this 4:06 element to listen for, which is mouseover. 4:11 When the mouse enters the element's boundaries, I want the element to change 4:16 all its letters to capitals, so I'll pass in a callback function for that. 4:20 Inside my callback function, I can get the textContent property of a list item, 4:29 then capitalize it with the toUpperCase method. 4:34 So here I'm actually taking the value, and 4:45 storing it directly back into listItems, using the assignment operator. 4:48 All right, so half our job is done at this point. 4:53 Now we still need to change the list item back to lowercase when the mouse leaves. 4:57 And the code for that will be very similar to what we just wrote. 5:01 In fact, let's copy this code and paste it underneath. 5:04 We wanna use the mouseout event for this handler. 5:09 And when the mouse does leave, 5:15 we want to change the text of the element to lower case using toLowerCase. 5:17 So let's save this, and have a look at it in the browser. 5:24 I'll refresh the page and hover over the first item and cool, it works. 5:27 And it's kind of an interesting effect. 5:33 But how can we add this behavior to all the elements in the list? 5:36 Well, the best way to do that would be to loop through all the list items and 5:40 call our event listener methods on each one. 5:44 So let's start by taking these square brackets off the listItems constant, so 5:48 that we're storing the whole collection in the constant. 5:53 And now we want to loop through all the list items, and 5:57 attach these handlers to each. 5:59 So let's start by surrounding this code in a for loop. 6:03 In the for loop, we'll start our index at 0, 6:16 And cycle through the loop the exact length of the listItems collection. 6:23 So then to access each item in the collection, 6:39 we'll use the index variable in square brackets on the listItems constant. 6:42 So let's save our file and check our work in the browser. 6:58 I'll refresh the page, hover over a list item, and great. 7:01 Now you can see all the list items have the behavior attached to them. 7:06 But there's a problem. 7:11 To see it, let's remove the last item on the list, plums, then let's add it back. 7:12 And now when we hover over plums, it doesn't change, 7:22 while the rest of the list still does. 7:25 So this is because we removed the element after we attached the behavior to it, and 7:28 then added a new element. 7:33 So the new element doesn't have that event listener. 7:34 To solve this, we could go into the function we just wrote to attach new items 7:37 to the list, and add this behavior to each new item the list creates. 7:41 But there's a better way, and we'll look at that in the next video. 7:45
You need to sign up for Treehouse in order to download course files.Sign up