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