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
Ruth O'Kelly
4,944 PointsStill not understanding the concept.
I am still trying to understand the concept of Event Delegation and Propagation. Why does the button not work in the initial scenario? I would have thought that by the time we click the button, the rest of the JS code has run and therefore the button has been created and is now ready to use?
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsHey Steven , you said ** it tried to attach event handlers when there were no buttons** , I was wondering for how much time it will wait for or search for buttons to be added into the DOM , so that it can attach the event handlers to them.?
Steven Parker
231,269 PointsThere is no waiting. If the code tries to attach an event handler on an element that does not exist, it fails. That's why the order that things are done in is important.
2 Answers
Steven Parker
231,269 PointsThe initial issue is caused by the order of the code. It has all run before you click on the button, but while it was running, it tried to attach event handlers when there were no buttons, and then created the button.
So the button itself is there, but it has no event handler to react to being clicked.
Ruth O'Kelly
4,944 PointsThanks Steven. So event listeners are only attached to elements, if that element is on the page at the time the event listener code is runs? (If that makes sense). If an element has not yet been appended to the page, then all event listener declarations will ignore that element?
Steven Parker
231,269 PointsThe listener doesn't "ignore" the element, one just does not exist on an element that was created later.
You can, however, create listeners with delegated handlers that will respond to elements created later. They are attached to an existing element which will be a parent of the element created later, and they rely on the concept of event propagation (also known as "bubbling").
This concept is covered in some of the more advanced courses (I'm not sure which by name).
Tyler Dix
14,230 PointsAs I understand this, the difference to really pay attention to is what event you're telling the JS interpreter to listen to. Before, it was:
$('.spoiler button')
And because that button was appended AFTER the event listener, it's basically listening for something that doesn't' exist.
With the change to:
$('.spoiler')
...it's now listening for the spoiler element, which DOES exist. This helped clarify this concept for me.
Joseph Quintiliano
Front End Web Development Techdegree Graduate 14,338 Pointsso what youre. saying is, because it cant listen to the button, because it was created later within the spoiler element...thus it must listen to the spoiler element to activate the button; assuming the button is a child of the spoiler element node.
am i understanding this correctly
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsAakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsPlease mention the name of the course in which you said this topic is covered if you remember Steven Parker .
Thanks