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
Roudy Antenor
4,124 PointsDoes 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
31,709 PointsYes, 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
9,154 PointsSo 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
31,709 PointsYes, that analogy is spot on.
Roudy Antenor
4,124 PointsHi 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
31,709 PointsYes and no. Events bubble up the DOM and Listeners listen for events traveling up the DOM. You are right about the benefit though.