JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

Kristian Woods
Kristian Woods
23,407 Points

Does 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?

Michelle Cannito
Michelle Cannito
8,992 Points

Yes, 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.)

Steven Parker
Steven Parker
179,852 Points

Michelle 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
Steven Parker
179,852 Points

Even 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
Michelle Cannito
8,992 Points

Maybe 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
Steven Parker
179,852 Points

No, 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
Michelle Cannito
8,992 Points

Steven, 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

When an EventTarget has a specified event such as click, only those ancestors with the same event have their handlers executed, right?