Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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 Parker210,872 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.