Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Event Bubbling vs. Event Capturing
This video describes the effect of using the
addEventListener() method on a
div that contains a number of
li elements. The idea is to affect all the
li elements with just one application of the event listener to their ancestor.
The video calls this "bubbling" — the effect of which is that the "event moves to other elements like the parent and other ancestors of the element." Yet isn't the
li element not the parent or ancestor of the
div but rather its descendant?
If so, then isn't this an example of "capturing" (also called "trickling") and not "bubbling"?
trickle down, bubble up
Steven Parker229,004 Points
In the DOM tree model, the root is at the top.
This is similar to a "family tree" in genealogy where parents are shown above their children.
So the parents and other ancestors of an element are above it. And yes, the
li is a descendant, and so the event bubbles up to it's ancestors.
"If a tree falls in a forest and no one is around to hear it, does it make a sound?"
It's gonna keep ringing in my head for a few days...
Thanks all for the nice discussion.
I think in order to check whether it's an example of event bubbling or event capturing , you should add an event handler to any of the <li> item too.
Now when you perform the "mouseclick" event , If it's bubbling , then event handler attached to <li> will be invoked first . But if it's event capturing then event handler attached to <div> gets invoked first then event capturing happens. Here you cant clearly say what going on as there is only one event handler .
When you perform the "mouseclick" event on the <li> items , even if <li> get the event first , if there is no event handler attached to <li> , you can't say whether it get the event first or the <div> get.
This article will help you Event Bubbling vs Event Capturing in understanding it more.