1
00:00:00,000 --> 00:00:04,452
Imagine you're a developer tasked
with reporting problems with your

2
00:00:04,452 --> 00:00:05,891
company's website.

3
00:00:05,891 --> 00:00:09,074
Every time there's an event,
like an outage,

4
00:00:09,074 --> 00:00:14,264
you create a report of the incident and
pass it to a senior member of your team.

5
00:00:14,264 --> 00:00:18,105
Watching out for bugs and
responding when they occur is your job.

6
00:00:18,105 --> 00:00:20,987
You are the event handler.

7
00:00:20,987 --> 00:00:25,419
This is similar to what an event
listener does in JavaScript.

8
00:00:25,419 --> 00:00:31,741
An event listener is a function that
runs every time a specific event occurs.

9
00:00:31,741 --> 00:00:37,200
On a web form, an event listener could
be registered on the Submit button.

10
00:00:37,200 --> 00:00:41,594
Whenever that button is clicked,
the event listener is triggered and

11
00:00:41,594 --> 00:00:44,283
sends the form information to a database.

12
00:00:44,283 --> 00:00:48,648
In the JavaScript and the DOM course,
you practice selecting elements.

13
00:00:48,648 --> 00:00:53,004
This will be helpful, as selecting
elements is the first step in watching for

14
00:00:53,004 --> 00:00:54,870
events on them.

15
00:00:54,870 --> 00:01:00,460
Once an element is selected, we can use a
powerful method, called addEventListener,

16
00:01:00,460 --> 00:01:06,400
to listen for events, then make changes
to that element or parts of the webpage.

17
00:01:06,400 --> 00:01:09,227
You've already seen this method
in several examples, but

18
00:01:09,227 --> 00:01:11,100
it hasn't really been explained yet.

19
00:01:12,670 --> 00:01:15,510
Let's open up the MDN page for
this method.

20
00:01:17,030 --> 00:01:19,712
The first thing to check
out is the headline.

21
00:01:19,712 --> 00:01:22,530
The first part of this
statement is EventTarget.

22
00:01:23,620 --> 00:01:26,600
The EventTarget is the element
where the event was generated.

23
00:01:27,730 --> 00:01:31,873
The summary description says
the EventTarget can be an element,

24
00:01:31,873 --> 00:01:34,068
the document, or window object.

25
00:01:34,068 --> 00:01:37,804
We'll focus on elements as
event targets in this course.

26
00:01:37,804 --> 00:01:42,894
The summary description also says that
the event target .addEventListener

27
00:01:42,894 --> 00:01:47,210
method registers a listener on
the event target it's called on.

28
00:01:48,400 --> 00:01:53,400
This registration sets up a callback to
fire in response to a selected event.

29
00:01:53,400 --> 00:01:56,572
And the callback function is where we
can write our own JavaScript to make

30
00:01:56,572 --> 00:01:58,360
something happen.

31
00:01:58,360 --> 00:02:00,480
The first parameter is type.

32
00:02:00,480 --> 00:02:04,336
That is where we pass a string that
represents the type of event we want to

33
00:02:04,336 --> 00:02:04,930
wait for.

34
00:02:06,060 --> 00:02:09,280
Remember the 500 event
types I shared earlier?

35
00:02:09,280 --> 00:02:12,780
Any of the element event
types can be selected here.

36
00:02:12,780 --> 00:02:16,259
After that,
we want to specify the listener.

37
00:02:16,259 --> 00:02:19,639
In the listener's explanation,
it says it's an object,

38
00:02:19,639 --> 00:02:21,880
something called an event interface.

39
00:02:23,100 --> 00:02:25,560
We don't need to worry about this either.

40
00:02:25,560 --> 00:02:28,850
The explanation also says that
it can simply be a function.

41
00:02:28,850 --> 00:02:31,150
And for this course,
that's what we'll be using.

42
00:02:32,160 --> 00:02:36,860
So to summarize, addEventListener takes
an event type and a callback function.

43
00:02:37,920 --> 00:02:42,658
This callback function is often called
an event handler because its purpose is to

44
00:02:42,658 --> 00:02:43,640
handle events.

45
00:02:44,730 --> 00:02:49,367
When addEventListener runs, it registers
the handler on the event target,

46
00:02:49,367 --> 00:02:53,810
setting the target up to fire the handler
anytime that event takes place.

47
00:02:55,020 --> 00:02:58,284
In previous courses, you may have
seen event handlers in action,

48
00:02:58,284 --> 00:03:01,100
though they hadn't been explained.

49
00:03:01,100 --> 00:03:04,983
So far they've only been click handlers,
but we can write handlers for

50
00:03:04,983 --> 00:03:06,160
all kinds of events.

51
00:03:07,200 --> 00:03:09,730
Even some of my favorite events,
like copy and paste.

52
00:03:10,790 --> 00:03:15,010
Using event handlers, you can make
your website plagiarism proof. 

53
00:03:15,010 --> 00:03:16,801
Well, somewhat.

54
00:03:16,801 --> 00:03:20,510
Let's open up the console and
copy the code from the teacher's notes.

55
00:03:21,740 --> 00:03:25,407
This code registers an event listener
on the root of the DOM tree,

56
00:03:25,407 --> 00:03:26,680
the document object.

57
00:03:27,890 --> 00:03:31,181
The event type it watches for
is the copy event.

58
00:03:31,181 --> 00:03:34,770
When the user selects texts and
copies using Ctrl+C, or

59
00:03:34,770 --> 00:03:39,555
the copy option from the menu, we use
the JavaScript alert function to print

60
00:03:39,555 --> 00:03:44,440
an alert to the screen, reminding the user
to give credit to the page author.

61
00:03:45,700 --> 00:03:51,107
When we try copying anything on the page,
an alert appears on the screen.

62
00:03:54,157 --> 00:03:56,165
In the JavaScript and the DOM course,

63
00:03:56,165 --> 00:03:59,570
we built a todo app that needed
some additional functionality.

64
00:04:00,820 --> 00:04:03,747
Now that we've had some
practice with events,

65
00:04:03,747 --> 00:04:07,637
we can use them to start adding
functionality to this todo app.

66
00:04:07,637 --> 00:04:12,574
Over in our workspace,
our project files, before anything else,

67
00:04:12,574 --> 00:04:17,524
let's remove the line in
index.HTML that refers to temp.js.

68
00:04:21,436 --> 00:04:24,262
Over in the browser, on our list of todos,

69
00:04:24,262 --> 00:04:28,040
let's capitalize an item when we hover or
mouse over it.

70
00:04:29,120 --> 00:04:33,390
To create this behavior, we need to
add a listener to each list item.

71
00:04:34,540 --> 00:04:38,916
We'll need to capitalize the element's
text when the mouse enters the list item's

72
00:04:38,916 --> 00:04:39,664
boundaries.

73
00:04:41,655 --> 00:04:45,301
Let's start by applying this
behavior to the first list item.

74
00:04:45,301 --> 00:04:47,385
Then we'll figure out how
to add it to all of them.

75
00:04:51,622 --> 00:04:57,054
Over in app.js, we'll first select
all the items at the top of the page.

76
00:05:00,088 --> 00:05:06,078
We'll create a variable
name listLtem = document,

77
00:05:06,078 --> 00:05:10,205
and the getElementByTagName method

78
00:05:10,205 --> 00:05:15,139
with the value of li,
to select list items.

79
00:05:15,139 --> 00:05:19,492
And again, we're only picking the first,
so we'll use [0].

80
00:05:23,945 --> 00:05:27,840
Now below that, I'll call addEventListener
on this listItem variable.

81
00:05:32,032 --> 00:05:35,019
The first argument is the event type,
which will be mouseover.

82
00:05:41,384 --> 00:05:43,420
Then we'll pass in our anonymous function.

83
00:05:53,169 --> 00:05:56,467
When the mouse enters
the element's boundaries,

84
00:05:56,467 --> 00:06:00,326
I want the element to change
all of its letters to uppercase.

85
00:06:01,717 --> 00:06:06,085
Inside my callback function, I can get
the text content of a listItem and

86
00:06:06,085 --> 00:06:08,820
capitalize it with the toUppercase method.

87
00:06:27,085 --> 00:06:29,847
Here I'm actually taking the value and

88
00:06:29,847 --> 00:06:34,961
storing it directly back into listItem
using the assignment operator.

89
00:06:34,961 --> 00:06:36,900
Let's save this and
have a look in the browser

90
00:06:41,173 --> 00:06:46,170
Refresh, when you hover over
the first item, it works.

91
00:06:46,170 --> 00:06:49,091
It's kind of an interesting effect,
however,

92
00:06:49,091 --> 00:06:52,796
the mouseover event is specific
to devices that use a mouse and

93
00:06:52,796 --> 00:06:56,946
won't work for touchscreen devices
like mobile phones or tablets.

94
00:06:56,946 --> 00:07:00,150
But how can we add this behavior
to all the elements in the list?

95
00:07:01,280 --> 00:07:04,590
One way to do that will be to loop
through all of the list items and

96
00:07:04,590 --> 00:07:07,100
call our addEventListener
method on each one.

97
00:07:08,350 --> 00:07:12,174
Let's start by taking the square brackets
off and adding an s to the list item

98
00:07:12,174 --> 00:07:15,788
constant so that we're storing
the whole collection in the constant.

99
00:07:24,114 --> 00:07:26,454
Make sure to add an s in
the function as well.

100
00:07:30,031 --> 00:07:31,623
That's listItems.

101
00:07:33,727 --> 00:07:36,489
Now we want to loop through
all the listItems and

102
00:07:36,489 --> 00:07:38,360
attach these handlers to each.

103
00:07:38,360 --> 00:07:40,914
Let's start by surrounding
this code in a for loop.

104
00:07:48,228 --> 00:07:55,219
We'll start at index 0, And
we'll loop through all the listItems.

105
00:08:05,336 --> 00:08:09,507
Then, to make sure we're accessing
each item in the collection,

106
00:08:09,507 --> 00:08:14,129
we use the index variable in square
brackets on the listItem's content.

107
00:08:21,885 --> 00:08:23,399
Let's check out the browser now.

108
00:08:31,855 --> 00:08:37,213
It looks like we have
an error on line 9 in app.js.

109
00:08:37,213 --> 00:08:42,449
We can't add event listeners to listItems
because it's a collection of elements,

110
00:08:42,449 --> 00:08:44,526
not an individual list element.

111
00:08:44,526 --> 00:08:48,439
We'll make sure to add the brackets
with the index variable so

112
00:08:48,439 --> 00:08:51,608
that we're only selecting
one element at a time.

113
00:08:51,608 --> 00:08:55,461
Before we move forward, I'll fix
some of the indentation and spacing.

114
00:09:20,617 --> 00:09:21,642
And we'll refresh.

115
00:09:28,788 --> 00:09:30,502
Now let's check our work.

116
00:09:30,502 --> 00:09:34,990
It works, now all the list items
have the behavior attached to them.

117
00:09:36,000 --> 00:09:37,790
But there's a problem.

118
00:09:37,790 --> 00:09:40,158
To find it, try to add a new list item.

119
00:09:46,542 --> 00:09:49,290
When we mouse over it, there's no effect.

120
00:09:50,330 --> 00:09:54,179
The event is triggered only when
we go to the next list item.

121
00:09:54,179 --> 00:09:58,865
Plus, our for loop creates an event
listener for every list item.

122
00:09:58,865 --> 00:10:00,606
If we had hundreds of list items,

123
00:10:00,606 --> 00:10:03,480
that would be a lot of code
that we don't need to write.

124
00:10:04,700 --> 00:10:08,960
That's because we added the element after
we attach the behavior to the list items.

125
00:10:10,500 --> 00:10:12,800
The new element doesn't
have that event listener.

126
00:10:14,040 --> 00:10:19,009
To solve this, we could go into the
function we wrote to attach new items to

127
00:10:19,009 --> 00:10:23,355
the list and add this behavior to
each new item the list creates.

128
00:10:23,355 --> 00:10:27,740
There's a better way, though, and
we'll explore that in the upcoming videos.