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
Kristian Woods
23,414 PointsDoes Bubbling in JavaScript only affect parent elements that have a event listener on them?
if a parent element doesn't have an event listener attached to it, will it be affected by its child's event listener?
Steven Parker
231,268 PointsMichelle Cannito, I'm confused when you say "the parent does not have an event listener, but is affected" — just how is the parent affected when it has no listener?
4 Answers
Steven Parker
231,268 PointsEven propagation ("bubbling") should only affect elements with event listeners.
To my knowledge (and barring further details from Michelle), an event "bubble" passes up through parents that have no listener without affecting them.
Michelle Cannito
8,992 PointsMaybe I'm misunderstanding bubbling. Suppose a li is a parent without an event listener, and button is it's child with a click event listener. The function for the child could have code that affects the parent. It can remove the parent for instance or change its content. Those are examples of a child (button) with an event listener affecting the parent (li) when the parent does not have an event listener. However, I am not sure if that is an example of bubbling. (I think it is, but idk, what do you think?)
Steven Parker
231,268 PointsNo, that's not an example of "event bubbling". Have you seen the Event Bubbling and Delegation video in the JavaScript and the DOM course?
Michelle Cannito
8,992 PointsSteven, you're right; I was wrong. Kristian, great question. After doing more research and re-watching the video (link to video: https://teamtreehouse.com/library/event-bubbling-and-delegation), I concur with Steven; only parents and ancestors with listeners may be affected. Thank you both!
The way one site explained it: suppose two or more elements have the same event handler-- which gets processed first? The answer is the innermost one, then it "bubbles up". There is also something called event capturing in which the outermost element is processed first and the event is "trickled down". Stackoverflow has a better explanation with example code here: http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing
Benjamin Hedgepeth
5,672 PointsWhen an EventTarget has a specified event such as click, only those ancestors with the same event have their handlers executed, right?
Michelle Cannito
8,992 PointsMichelle Cannito
8,992 PointsYes, the browser will go up the DOM tree until the parent is reached, checking as it goes; no, generally nothing will happen, it depends on what you code. For example, maybe a paragraph click event is to change the content of the parent headline's content. In that case, the parent does not have an event listener, but is affected. (Normally, you probably wouldn't code this way-- you'd have the click event in the heading element; this is just an example to answer your question.)