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.

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

Roudy Antenor
Roudy Antenor
4,124 Points

Does Event Bubbling mean a click Event on an <li> element to turn it 'red',- can make all it's ancestors red as well??

This concept is confusing me BIG Time - if i were to place an event handler on a single <li> element to turn it's content red, what i am hearing is that there is a possibility that this single event will also be transferred to the containing <ul> element .... then the < div > element...then the <body> element triggering them all to turn their contents red as well?

3 Answers

Andrew Shook
Andrew Shook
31,709 Points

Yes, that is exactly how event bubbling works. The reason behind event bubbling though is different. Say you have a lot of of list with a variable list elements ( by this I mean list elements that get add through an action like clicking a button or ajax calls). In this case, if you attach the event listener to just the list items ( the li elements), then any list item added after the initial page load will not have the event listener attached to it. You would need to attach the event listener to it manually in your code. But, with bubbling you can attach the event listener to the list (the ul or ol element), and when any event comes in from a list item will be acted on regardless of when the list item was add to the DOM.

Jonathon Irizarry
Jonathon Irizarry
9,154 Points

So another analogy rather than bubbling is a caretaker(delegated handler = assigned event listener) that has been assigned to take care of multiple people or children(descendant elements). When the caretaker hears a noise coming from one of the people(descendant element) they are in charge of watching they are triggered into action(callback functions are run) due to an event(i.e. 'click') occurring from the person being cared for. When new people(new descendant elements) arrive for care under that same caretaker(delegated handler) they get the same action(callback functions run) from the caretaker whenever they cause an event(i.e. 'mouseover') such as crying or screaming for help.

Andrew Shook
Andrew Shook
31,709 Points

Yes, that analogy is spot on.

Roudy Antenor
Roudy Antenor
4,124 Points

Hi Andrew, Than doesn't that mean the real benefit of bubbling - it is to set the eventListener on the containing parent element to ''bubble downward'' so that it's children can be listened to by simpler code?

Andrew Shook
Andrew Shook
31,709 Points

Yes and no. Events bubble up the DOM and Listeners listen for events traveling up the DOM. You are right about the benefit though.