This course will be retired on February 12, 2022. We recommend "JavaScript and the DOM" for up-to-date content.
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
An event received by an element doesn't stop with that one element. That event moves to other elements like the parent, and other ancestors of the element. This is called "event bubbling".
So far we've been able to respond to user
events, but there's an interesting thing
0:00
happening behind the scenes
when an event takes place.
0:04
An event received by an element
doesn't stop with that one element,
0:07
that event moves to other elements, the
parent and other ancestors of the element.
0:11
This is called event bubbling,
now I know this sounds funny as if they
0:16
percolate like coffee, but in a sense
that's exactly what's happening.
0:19
So let's take a look at
the drawing of the DOM again.
0:23
Look at this li element at the bottom.
0:26
Let's say a user clicks on the list item,
the list item receives the click event but
0:28
immediately after, its parent,
the UL element, receives the same event.
0:33
This means that if you added
a click event handler to the ul,
0:38
that event handler function
would run as well.
0:41
In other words, clicking on the li
is also clicking on the ul.
0:44
And it doesn't stop there.
0:47
Next, the ul's parent element,
the body, receives the same event, and
0:49
the event keeps traveling until it gets
to the top most element on the tree.
0:53
Likewise, if the h1
element receives an event,
0:58
that event travels to the body element and
finally to the root as well.
1:01
So events rise up like
bubbles through the DOM tree,
1:05
which is where that
term bubble comes from.
1:07
What bubbling allows us to do is listen
for events on ancestor elements,
1:10
for example,
if we set a click handler on the body,
1:14
our callback will trigger whenever
any of its children are clicked.
1:17
So if any of the list items,
the paragraph,
1:21
or headline elements are clicked,
the callback will trigger in this example.
1:23
Event bubbling might not
seem immediately useful,
1:28
but in fact this will allow us to
write much more powerful handlers.
1:31
For example, we can use this to replace
all the handlers we're attaching to
1:34
each list item with just one pair
of handlers on a parent element.
1:38
I'll show you how.
1:42
In the previous video, we wrote code
to loop through other list items and
1:44
attach individual handlers to each item.
1:48
Well, with bubbling we could just do this
once on an ancestor of these list items
1:52
and all events would still be caught and
handled as they bubble up.
1:56
This would make our code
much simpler to implement
2:00
as well as using less of the browsers
memory for all those individual listeners.
2:02
And there's one more benefit,
since the handlers are not bound
2:06
to individual list items, any item can
be added after the listener has run and
2:10
no additional setup is required for
that item events to be handled.
2:15
So let's switch back to index.html and
2:19
look at where we want
to attach our behavior.
2:22
So when you're trying to decide
which element to use, remember,
2:25
it has to be an ancestor of the target
elements, in other words, a tag or
2:28
element that wraps around or
contains the element you're interested in.
2:33
For example,
setting the event listener on the headline
2:37
would do no good because it's a sibling
of an ancestor, not in the direct line.
2:41
Also think about what element won't
ever be removed from the DOM.
2:46
For example, the body element will almost
never be removed, but for the sake
2:50
of performance it's usually best to get
as close to the targets as possible.
2:56
So let's attach it to the div with the
class list, which contains the whole list.
3:00
I'm going to switch back to app.js, and
3:08
up top, we already have a reference
to the list div element for
3:11
our other handler that hides and
unhides the list, so let's reuse it.
3:16
So first, I'll remove just the loop and
this list items selection, and
3:21
unindent these handlers.
3:27
Then, I'll place each event listener
on listDiv, rather than listItems[i].
3:31
But looking at the inside of
these callback functions,
3:45
there's a problem,
when events fire on listDiv,
3:48
how do we know which list
item is triggering the event?
3:51
The only thing we have is
a reference to the entire div.
3:55
So in the next video I'll show you how to
solve that problem using what's called
3:59
the event object.
4:02
See you there.
4:03
You need to sign up for Treehouse in order to download course files.
Sign up