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.