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
Learn about event delegation and how it can be used to add event listeners to dynamically added DOM elements.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The on() method addresses a common problem
that can occur when dynamically creating
0:00
elements.
0:04
When the code base of a website
gets larger and more and
0:05
more people work on it, you can't always
guarantee the order in which elements get
0:09
added to the page and when the event
listeners are added to the page.
0:13
Go ahead and open up the workspace
with this video now and
0:16
I'll show you what I mean.
0:19
I'll change this method back to click.
0:20
And I'll move this event listener code
above where we append the button to
0:28
the page.
0:32
Save and preview, click on the button,
and it doesn't work, nothing happens.
0:34
Why isn't the button being hidden?
0:41
Looking at this first line of code,
0:44
we're selecting all the spoiler buttons
on the page and applying the event
0:46
handler to show the span containing
the spoiler text and hiding the button.
0:50
But at this point in the script,
we haven't created the button and
0:55
appended the button to the page yet.
0:58
We do that here.
1:01
So up here, we're saying add this
event listener to this button element.
1:03
But the button doesn't yet exist.
1:08
This is a problem you may find
yourself running into a lot
1:11
when dynamically adding
elements to a page.
1:13
Say we wanted to add a feature to our
spoiler revealer that allows the user to
1:16
add new spoilers,
that's where you'd run into a problem.
1:20
Any buttons you add to the page after
it's already loaded won't automatically
1:25
have a click event attached,
so they won't work.
1:28
That's where event delegation and
the on() method come in.
1:32
Event delegation means
you're listening for
1:36
an event on the parent element
instead of on the child element.
1:38
So in our project, instead of listening
for a click event, on the button itself
1:42
which we're dynamically adding here, we'll
listen for a click event on the button's
1:48
parent element which is the paragraph
tag with the class of spoiler.
1:52
Because we're listening for
1:57
an event on the parent element,
it doesn't matter whether the descendants
1:58
exist in the DOM at the time of the page
load, or are dynamically added later.
2:02
This is called event propagation.
2:07
When an event moves through the DOM from
a child to a parent element, that's called
2:09
event propagation because the event
propagates, or moves through the DOM.
2:14
In this example, an event from a button
gets passed to the parent paragraph.
2:18
Here's what that looks like in code.
2:24
I'll comment out this code for now.
2:28
And first, we select the parent
element which is spoiler.
2:31
Then we use the on() method.
2:37
Remember, the first argument of
the on() method is the event or
2:39
events we're listening for.
2:43
So click, mouse over,
blur, mouse out, etc.
2:45
In this case, we're listening for a click.
2:49
Then we give it,
as a second argument, a selector for
2:53
the actual element we want to listen for
the click on.
2:56
For our selector,
we can just use the element name, button.
3:00
Then we can add our click handler.
3:04
Let me make sure you understand
what this is saying.
3:09
Basically, we're saying here,
if the user clicks the spoiler element,
3:12
or any of the elements nested
within the spoiler element,
3:17
start paying attention because
we may want you to do something.
3:20
Secondly, we're saying, if the user
clicks anywhere inside the spoiler,
3:24
in that particular thing, it was clicked
on was an element called button.
3:29
Then fire this function, run this code.
3:33
Let's copy and paste our code into this
new listener and delete the old one.
3:37
So let's save and preview,
and the button works again.
3:57
Now, it doesn't matter when the button
is created because we're listening for
4:03
this event on the button's parent
element which is already on the page.
4:06
Event delegation comes in very handy when
adding interactivity to dynamically added
4:11
elements.
4:16
Or when you're not in full control
of when elements are added.
4:18
If you're finding event delegation a bit
difficult to understand, that's okay.
4:21
It can be a little hard to grasp until you
run into the problem in your own code.
4:26
So just remember, if you're ever
using JavaScript to create and
4:30
add new elements to a page and find
that your event listeners aren't firing,
4:34
look up event delegation and
the on() method.
4:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up