Preview
Video Player
00:00
00:00
Listening for Events with addEventListener()
10:31In the JavaScript and the DOM course you practiced selecting elements. This will be helpful as selecting elements is the first step in watching for events. Once an element is selected, we can use a powerful method called addEventListener to listen for events, then make changes to that element or parts of the web page.
Imagine you're a developer tasked
with reporting problems with your
0:00
company's website.
0:04
Every time there's an event,
like an outage,
0:05
you create a report of the incident and
pass it to a senior member of your team.
0:09
Watching out for bugs and
responding when they occur is your job.
0:14
You are the event handler.
0:18
This is similar to what an event
listener does in JavaScript.
0:20
An event listener is a function that
runs every time a specific event occurs.
0:25
On a web form, an event listener could
be registered on the Submit button.
0:31
Whenever that button is clicked,
the event listener is triggered and
0:37
sends the form information to a database.
0:41
In the JavaScript and the DOM course,
you practice selecting elements.
0:44
This will be helpful, as selecting
elements is the first step in watching for
0:48
events on them.
0:53
Once an element is selected, we can use a
powerful method, called addEventListener,
0:54
to listen for events, then make changes
to that element or parts of the webpage.
1:00
You've already seen this method
in several examples, but
1:06
it hasn't really been explained yet.
1:09
Let's open up the MDN page for
this method.
1:12
The first thing to check
out is the headline.
1:17
The first part of this
statement is EventTarget.
1:19
The EventTarget is the element
where the event was generated.
1:23
The summary description says
the EventTarget can be an element,
1:27
the document, or window object.
1:31
We'll focus on elements as
event targets in this course.
1:34
The summary description also says that
the event target .addEventListener
1:37
method registers a listener on
the event target it's called on.
1:42
This registration sets up a callback to
fire in response to a selected event.
1:48
And the callback function is where we
can write our own JavaScript to make
1:53
something happen.
1:56
The first parameter is type.
1:58
That is where we pass a string that
represents the type of event we want to
2:00
wait for.
2:04
Remember the 500 event
types I shared earlier?
2:06
Any of the element event
types can be selected here.
2:09
After that,
we want to specify the listener.
2:12
In the listener's explanation,
it says it's an object,
2:16
something called an event interface.
2:19
We don't need to worry about this either.
2:23
The explanation also says that
it can simply be a function.
2:25
And for this course,
that's what we'll be using.
2:28
So to summarize, addEventListener takes
an event type and a callback function.
2:32
This callback function is often called
an event handler because its purpose is to
2:37
handle events.
2:42
When addEventListener runs, it registers
the handler on the event target,
2:44
setting the target up to fire the handler
anytime that event takes place.
2:49
In previous courses, you may have
seen event handlers in action,
2:55
though they hadn't been explained.
2:58
So far they've only been click handlers,
but we can write handlers for
3:01
all kinds of events.
3:04
Even some of my favorite events,
like copy and paste.
3:07
Using event handlers, you can make
your website plagiarism proof.
3:10
Well, somewhat.
3:15
Let's open up the console and
copy the code from the teacher's notes.
3:16
This code registers an event listener
on the root of the DOM tree,
3:21
the document object.
3:25
The event type it watches for
is the copy event.
3:27
When the user selects texts and
copies using Ctrl+C, or
3:31
the copy option from the menu, we use
the JavaScript alert function to print
3:34
an alert to the screen, reminding the user
to give credit to the page author.
3:39
When we try copying anything on the page,
an alert appears on the screen.
3:45
In the JavaScript and the DOM course,
3:54
we built a todo app that needed
some additional functionality.
3:56
Now that we've had some
practice with events,
4:00
we can use them to start adding
functionality to this todo app.
4:03
Over in our workspace,
our project files, before anything else,
4:07
let's remove the line in
index.HTML that refers to temp.js.
4:12
Over in the browser, on our list of todos,
4:21
let's capitalize an item when we hover or
mouse over it.
4:24
To create this behavior, we need to
add a listener to each list item.
4:29
We'll need to capitalize the element's
text when the mouse enters the list item's
4:34
boundaries.
4:38
Let's start by applying this
behavior to the first list item.
4:41
Then we'll figure out how
to add it to all of them.
4:45
Over in app.js, we'll first select
all the items at the top of the page.
4:51
We'll create a variable
name listLtem = document,
5:00
and the getElementByTagName method
5:06
with the value of li,
to select list items.
5:10
And again, we're only picking the first,
so we'll use [0].
5:15
Now below that, I'll call addEventListener
on this listItem variable.
5:23
The first argument is the event type,
which will be mouseover.
5:32
Then we'll pass in our anonymous function.
5:41
When the mouse enters
the element's boundaries,
5:53
I want the element to change
all of its letters to uppercase.
5:56
Inside my callback function, I can get
the text content of a listItem and
6:01
capitalize it with the toUppercase method.
6:06
Here I'm actually taking the value and
6:27
storing it directly back into listItem
using the assignment operator.
6:29
Let's save this and
have a look in the browser
6:34
Refresh, when you hover over
the first item, it works.
6:41
It's kind of an interesting effect,
however,
6:46
the mouseover event is specific
to devices that use a mouse and
6:49
won't work for touchscreen devices
like mobile phones or tablets.
6:52
But how can we add this behavior
to all the elements in the list?
6:56
One way to do that will be to loop
through all of the list items and
7:01
call our addEventListener
method on each one.
7:04
Let's start by taking the square brackets
off and adding an s to the list item
7:08
constant so that we're storing
the whole collection in the constant.
7:12
Make sure to add an s in
the function as well.
7:24
That's listItems.
7:30
Now we want to loop through
all the listItems and
7:33
attach these handlers to each.
7:36
Let's start by surrounding
this code in a for loop.
7:38
We'll start at index 0, And
we'll loop through all the listItems.
7:48
Then, to make sure we're accessing
each item in the collection,
8:05
we use the index variable in square
brackets on the listItem's content.
8:09
Let's check out the browser now.
8:21
It looks like we have
an error on line 9 in app.js.
8:31
We can't add event listeners to listItems
because it's a collection of elements,
8:37
not an individual list element.
8:42
We'll make sure to add the brackets
with the index variable so
8:44
that we're only selecting
one element at a time.
8:48
Before we move forward, I'll fix
some of the indentation and spacing.
8:51
And we'll refresh.
9:20
Now let's check our work.
9:28
It works, now all the list items
have the behavior attached to them.
9:30
But there's a problem.
9:36
To find it, try to add a new list item.
9:37
When we mouse over it, there's no effect.
9:46
The event is triggered only when
we go to the next list item.
9:50
Plus, our for loop creates an event
listener for every list item.
9:54
If we had hundreds of list items,
9:58
that would be a lot of code
that we don't need to write.
10:00
That's because we added the element after
we attach the behavior to the list items.
10:04
The new element doesn't
have that event listener.
10:10
To solve this, we could go into the
function we wrote to attach new items to
10:14
the list and add this behavior to
each new item the list creates.
10:19
There's a better way, though, and
we'll explore that in the upcoming videos.
10:23