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

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Event Delegation

Joseph Frazer
Joseph Frazer
5,404 Points
Posted by Joseph Frazer
Joseph Frazer
5,404 Points

I am super confused with event bubbling... any help?

With event bubbling I am confused with what it is and how to get rid of it or whatever.

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

:point_right: Event bubbling is simply triggering events up the DOM tree in reverse nesting order.

For example. let's consider a mouse click on a button:

  1. The button becomes the "event target"
  2. If a click event handler is set for that object, the event is triggered
  3. If the handler does not stop propagation (bubbling), the event "bubbles up" to the parent object.
  4. If the current (parent) object is not the document itself, go back and repeat from step 2

As mentioned in step 3, you can stop bubbling by calling "stopPropagation()" on the event object in the handler code.

I found this one-page event tuturial that includes some nice graphics and demos that may also help make the process clearer.