1 00:00:00,200 --> 00:00:01,640 At the beginning of this course, 2 00:00:01,640 --> 00:00:05,870 I mentioned that there were three basic concepts to making a site interactive. 3 00:00:05,870 --> 00:00:09,520 Selection is always the first step, from there you can either manipulate 4 00:00:09,520 --> 00:00:13,540 the element directly, or ask it to listen for user actions. 5 00:00:13,540 --> 00:00:15,960 You've already learned about the first two concepts, so 6 00:00:15,960 --> 00:00:19,520 now it's time to learn about the third one, listening for user actions or events. 7 00:00:21,080 --> 00:00:23,990 So the first thing to look at is this headline. 8 00:00:23,990 --> 00:00:28,110 Remember earlier when I said that events always target an element on the page? 9 00:00:28,110 --> 00:00:32,560 Well that's what EventTarget is, it's our selected element. 10 00:00:32,560 --> 00:00:34,855 And if you look at this summary description, 11 00:00:34,855 --> 00:00:40,245 it says the EventTarget can be an element, a document, or window object. 12 00:00:40,245 --> 00:00:44,205 So in other words, the EventTarget object is a sort of catchall, 13 00:00:44,205 --> 00:00:47,955 because there are many kinds of objects that we can set up to listen for events. 14 00:00:47,955 --> 00:00:50,980 And we'll focus on just a few of them in this course. 15 00:00:50,980 --> 00:00:56,470 Now, this summary description also says that the EventTarget.addEventListener 16 00:00:56,470 --> 00:01:01,500 method registers the specified listener on the event target it's called on. 17 00:01:01,500 --> 00:01:04,400 So this registration sets up the callback 18 00:01:04,400 --> 00:01:06,940 to fire in response to the specified event. 19 00:01:06,940 --> 00:01:09,590 And the callback function is often where we will select and 20 00:01:09,590 --> 00:01:11,110 manipulate elements in the DOM. 21 00:01:12,290 --> 00:01:18,560 Looking at the Syntax section, we see that addEventListener has three forms. 22 00:01:18,560 --> 00:01:23,690 And these square brackets here mean that the parameters inside are optional. 23 00:01:23,690 --> 00:01:26,970 These represent advanced ways of calling the method that we won't worry 24 00:01:26,970 --> 00:01:27,810 about for now. 25 00:01:27,810 --> 00:01:30,887 So for our purposes, we can use any of these three forms, 26 00:01:30,887 --> 00:01:34,626 since they're identical, apart from their optional parameters. 27 00:01:34,626 --> 00:01:41,380 Now looking at the first parameter, type, it's a string representing the event type. 28 00:01:41,380 --> 00:01:44,440 Remember all the event types were looked at earlier like click, 29 00:01:44,440 --> 00:01:45,790 key press, and so on? 30 00:01:45,790 --> 00:01:48,740 Well any of those event types can be specified here. 31 00:01:49,740 --> 00:01:52,880 Now after that, we need to specify the listener. 32 00:01:52,880 --> 00:01:56,760 And in the explanation, it says that it's an object, 33 00:01:56,760 --> 00:01:58,785 something called Event interface. 34 00:01:58,785 --> 00:02:00,900 Well, we don't need to worry about this either. 35 00:02:00,900 --> 00:02:05,030 But the explanation also says that it can simply be a function, and for 36 00:02:05,030 --> 00:02:07,180 this course that's what we'll be using. 37 00:02:07,180 --> 00:02:13,420 So to summarize, addEventListener takes an event type and a callback function. 38 00:02:13,420 --> 00:02:16,360 This callback function is often called an event handler 39 00:02:16,360 --> 00:02:19,102 because its purpose is to handle events. 40 00:02:19,102 --> 00:02:23,960 When addEventListener runs, it registers a handler on the event target, 41 00:02:23,960 --> 00:02:28,400 setting the target up to fire the handler any time that event takes place. 42 00:02:28,400 --> 00:02:31,672 And we've already been implementing a number of event handlers throughout 43 00:02:31,672 --> 00:02:34,620 this course, and so far they've been click handlers. 44 00:02:34,620 --> 00:02:38,660 So now let's see two other mouse events in action, the mouse over and 45 00:02:38,660 --> 00:02:39,590 mouse out event. 46 00:02:41,110 --> 00:02:45,470 Over in our workspace, or project files, before doing anything else, 47 00:02:45,470 --> 00:02:51,460 let's delete the temp.js file, and remove the line in index.html that refers to it. 48 00:02:53,340 --> 00:02:56,380 So now let's have a look at our page in the browser. 49 00:02:56,380 --> 00:03:01,660 So for our list of things here, let's capitalize an item when we hover or 50 00:03:01,660 --> 00:03:06,370 mouse over it, and change it back to lower case when the mouse moves off. 51 00:03:06,370 --> 00:03:11,310 So to create this behavior, we need to add two listeners to each list item. 52 00:03:11,310 --> 00:03:16,120 We'll need one that capitalizes the element's text when the mouse enters 53 00:03:16,120 --> 00:03:17,540 the list item's boundaries. 54 00:03:17,540 --> 00:03:20,970 And we'll need another one that changes it back when the mouse leaves. 55 00:03:20,970 --> 00:03:24,536 So let's start by applying the behavior to the first list item, 56 00:03:24,536 --> 00:03:26,922 then we'll see how to add it to all of them. 57 00:03:26,922 --> 00:03:30,250 I'll open up app.js, and 58 00:03:30,250 --> 00:03:35,026 first I'll select all the list items at 59 00:03:35,026 --> 00:03:40,091 the top of the page with const listItems = 60 00:03:40,091 --> 00:03:49,071 document.getElementsByTagName(li) And 61 00:03:49,071 --> 00:03:54,755 again, for now let's just access the first list item using square brackets with a 0. 62 00:03:56,890 --> 00:04:01,598 And right below, we'll call addEventListener on listItems. 63 00:04:06,271 --> 00:04:11,027 And as the first argument, I'll type the event that I want this 64 00:04:11,027 --> 00:04:14,460 element to listen for, which is mouseover. 65 00:04:16,520 --> 00:04:20,788 When the mouse enters the element's boundaries, I want the element to change 66 00:04:20,788 --> 00:04:24,941 all its letters to capitals, so I'll pass in a callback function for that. 67 00:04:29,380 --> 00:04:34,719 Inside my callback function, I can get the textContent property of a list item, 68 00:04:34,719 --> 00:04:38,029 then capitalize it with the toUpperCase method. 69 00:04:45,719 --> 00:04:48,579 So here I'm actually taking the value, and 70 00:04:48,579 --> 00:04:53,540 storing it directly back into listItems, using the assignment operator. 71 00:04:53,540 --> 00:04:57,070 All right, so half our job is done at this point. 72 00:04:57,070 --> 00:05:01,410 Now we still need to change the list item back to lowercase when the mouse leaves. 73 00:05:01,410 --> 00:05:04,240 And the code for that will be very similar to what we just wrote. 74 00:05:04,240 --> 00:05:09,093 In fact, let's copy this code and paste it underneath. 75 00:05:09,093 --> 00:05:15,050 We wanna use the mouseout event for this handler. 76 00:05:15,050 --> 00:05:17,350 And when the mouse does leave, 77 00:05:17,350 --> 00:05:23,070 we want to change the text of the element to lower case using toLowerCase. 78 00:05:24,510 --> 00:05:27,905 So let's save this, and have a look at it in the browser. 79 00:05:27,905 --> 00:05:33,760 I'll refresh the page and hover over the first item and cool, it works. 80 00:05:33,760 --> 00:05:35,380 And it's kind of an interesting effect. 81 00:05:36,890 --> 00:05:40,310 But how can we add this behavior to all the elements in the list? 82 00:05:40,310 --> 00:05:44,320 Well, the best way to do that would be to loop through all the list items and 83 00:05:44,320 --> 00:05:47,030 call our event listener methods on each one. 84 00:05:48,240 --> 00:05:53,008 So let's start by taking these square brackets off the listItems constant, so 85 00:05:53,008 --> 00:05:57,170 that we're storing the whole collection in the constant. 86 00:05:57,170 --> 00:05:59,680 And now we want to loop through all the list items, and 87 00:05:59,680 --> 00:06:03,030 attach these handlers to each. 88 00:06:03,030 --> 00:06:06,467 So let's start by surrounding this code in a for loop. 89 00:06:16,700 --> 00:06:21,225 In the for loop, we'll start our index at 0, 90 00:06:23,746 --> 00:06:27,982 And cycle through the loop the exact length of the listItems collection. 91 00:06:39,070 --> 00:06:42,391 So then to access each item in the collection, 92 00:06:42,391 --> 00:06:47,941 we'll use the index variable in square brackets on the listItems constant. 93 00:06:58,067 --> 00:07:01,700 So let's save our file and check our work in the browser. 94 00:07:01,700 --> 00:07:06,250 I'll refresh the page, hover over a list item, and great. 95 00:07:06,250 --> 00:07:09,490 Now you can see all the list items have the behavior attached to them. 96 00:07:11,110 --> 00:07:12,650 But there's a problem. 97 00:07:12,650 --> 00:07:19,372 To see it, let's remove the last item on the list, plums, then let's add it back. 98 00:07:22,141 --> 00:07:25,178 And now when we hover over plums, it doesn't change, 99 00:07:25,178 --> 00:07:28,140 while the rest of the list still does. 100 00:07:28,140 --> 00:07:33,180 So this is because we removed the element after we attached the behavior to it, and 101 00:07:33,180 --> 00:07:34,870 then added a new element. 102 00:07:34,870 --> 00:07:37,540 So the new element doesn't have that event listener. 103 00:07:37,540 --> 00:07:41,390 To solve this, we could go into the function we just wrote to attach new items 104 00:07:41,390 --> 00:07:45,960 to the list, and add this behavior to each new item the list creates. 105 00:07:45,960 --> 00:07:48,760 But there's a better way, and we'll look at that in the next video.