Preview
Video Player
00:00
00:00
Event Bubbling and Delegation
7:56So far we've been able to respond to user events. There's an interesting thing happening behind the scenes, though, when an event takes place. An event received by an element doesn't stop with that one element. That event moves to other elements -- the parent, and other ancestors of the element.
So far,
we've been able to respond to user events.
0:00
There's an interesting thing
happening behind the scenes though,
0:03
when an event takes place.
0:06
An event received by an element
doesn't stop with that one element.
0:08
The event moves on to other elements,
the parent and other ancestor elements.
0:13
I once went whale watching with my son.
0:18
When he saw an orca,
he would say, hey dad an orca.
0:21
The spotting of the whale bubbled up
from the child element to the parent.
0:25
When I heard my son say this,
I responded, wow!
0:29
The parent element captured an event and
passed it down to the child.
0:33
We refer to events traveling from
children to ancestors as bubbling.
0:37
The reverse is capture where elements
from the document down to the target
0:42
are checked for event listeners.
0:46
This means if a child receives an event
which its parent has a listener for,
0:49
the parent's event listener
will also be triggered.
0:54
We'll mostly focus on bubbling here
because it allows us to implement
0:57
one of the most powerful event
handling patterns called delegation.
1:01
Let's go back to the DOM tree.
1:06
Let's say a user clicks on
the list item at the bottom.
1:08
The list item receives the click event,
but
1:12
immediately after its parent,
the UL element receives the same event.
1:15
This means that if you added
a click event handler to the UL,
1:21
the event handler function
would run as well.
1:24
In other words, clicking on the Li
is also clicking on the UL.
1:28
And it doesn't stop there.
1:34
Next, the UL's parent element,
the body, receives the same event.
1:36
The event keeps traveling until it gets
to the top most element on the tree.
1:41
Likewise, if the h1
element receives any event,
1:46
that event travels to the body element,
and finally to the document as well.
1:50
So events rise like bubbles
through the DOM tree,
1:56
which is where the term bubble comes from.
1:58
What bubbling allows us to do is listen
for events on ancestor elements.
2:02
For example, when we set a click
handler on the unordered list,
2:07
our callback will trigger it whenever any
of its children list items are clicked.
2:11
This will allow us to write
much more powerful handlers.
2:17
We can use this to replace all
the handlers we're attaching to each list
2:20
item with just one handler
on a parent element.
2:24
I'll show you how.
2:28
In the previous video, we wrote code
to loop through all the list items and
2:30
attached individual handlers to each item.
2:35
With bubbling, we could just do this once
on an ancestor of these list items and
2:38
all events would still be caught and
handled as they bubble up.
2:42
This would make our code
much simpler to implement,
2:47
as well as using less of the browser's
memory for all those individual listeners.
2:50
And there's one more benefit.
2:55
Since the handlers are not
bound to individual list items,
2:57
any item can be added after
the listener has run.
3:01
And no additional setup is required for
that item's events to be handled.
3:05
Let's switch back to our HTML and find
out where we want to attach the behavior.
3:11
When you're trying to decide
which element to use,
3:16
remember it has to be an ancestor
of the target elements.
3:19
In other words, a tag or
element that wraps around or
3:23
contains the element you're interested in.
3:26
For example, setting the event listener on
the headline would not do any good because
3:30
it's a sibling of an ancestor.
3:34
We could listen on the document object as
any events that happened in the window
3:37
would be captured.
3:41
For the sake of performance though,
3:43
it's usually best to get as
close to targets as possible.
3:44
Let's attach it to the div
with the class list-container,
3:48
which contains the whole list.
3:51
I'm going to switch back to app.js.
3:55
We already have a reference
to the list div element for
3:58
our other handler that hides and
unhides the list.
4:01
Let's reuse it.
4:05
First, I'll remove just the loop and
list item selection.
4:07
Then, we want to place the event listener
on taskList rather than listItems.
4:19
But on the inside of this callback
function, there's a problem.
4:28
When events fire on task list,
4:32
how do we know which list
item is triggering the event?
4:33
Let's check the party flyer or
event object for
4:37
our favorite piece of event data.
4:41
The event target property, we can use
the event property we learned earlier.
4:43
You'll need to add some extra code to
ensure the behavior is only run for
4:49
list item elements.
4:52
You can get a target element's
tag name from
4:54
the tag name property of the event object.
4:57
You can read more about tag name at MDN
which is linked to the teacher's note.
5:00
Go ahead and pause this video
to try to figure out how to
5:06
add the desired behavior
to the list elements.
5:09
I'll show you my solution now.
5:13
The first thing I'll do is to
add in the event parameter.
5:16
So the event object will be
available inside the handler.
5:20
Then we need to get the specific
element that is triggering the event.
5:27
We can use the target property
on the event object for this.
5:32
I'll replace listItems with event.target.
5:36
But there's still a problem.
5:52
These handlers will fire on any of the
elements inside the div, as well as for
5:54
the div itself.
5:58
We want this behavior to
affect listItems only.
6:00
Let's add an if statement to each
handler that will only allow
6:04
listItems to have this behavior.
6:09
Inside the event listener, we'll wrap
this statement with our if statement.
6:12
And we'll look for the event target name,
using the tagName property.
6:18
And with the equality operator, we'll
check to make sure that equals capitalized
6:27
LI because the tagName property
always returns capitalized values.
6:34
Make sure we have our brackets
around the statement.
6:39
Let's clean up the indentation here.
6:42
Now this code should only run for
list elements.
6:53
Let's switch over to the browser and
try this in action.
6:56
Hovering over the list elements, the
behavior is exactly the same as before.
7:02
The difference is there's only one handler
on the containing div instead of eight or
7:06
so handlers on each list item.
7:11
Even better, watch what happens when
I remove an item and add a new one.
7:13
The new item still has
the behavior attached to it.
7:25
You've learned a lot so far.
7:31
You've learned what events are and
how to handle them with event listeners.
7:33
We've learned about event bubbling, and
7:37
how to access the event object
to handle events intelligently.
7:40
You've really learned the basics
of making a web page interactive.
7:44
Well done.
7:47
The next set of videos will add to your
knowledge about how to get references to
7:49
elements in the DOM.
7:53
I'll see you there.
7:55