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 The Event Object

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

A couple of questions regarding 'event bubbling'

Hello!

I have a couple of questions:

1.) In theory, it seems like we could just use document as our container in conjunction with the if(event.target.tagName) for any element we wanted to select on the page... But I'm sure that would be frowned upon. Would this be due to performance issues? And if so, why?

2.) Why did the initial problem of failing to toUpperCase a new item added become fixed after the implementation of our event object?

Thanks, James,

John Smith
John Smith
Courses Plus Student 32 Points

1.) You could but it would be inefficient for performance. The reason is that every item you mouseover and mouseout of would have to be evaluated against your event handler statements; specifically if (event.target.tagName == "LI") .

2.) Basically, before the event listeners would be added to the list elements when the page first loaded. When a new element was created it did not have an event listener that would trigger the toUpperCase method. This could be accomplished by setting a new event listener on the new element.

The new event object implementation runs the list item selection each time a mouseover or mouseout event occurs in the listDiv. So, even as new items are added they will satisfy the if (event.target.tagName == "LI") statement and have the toUpperCase method called.

James Barrett
James Barrett
13,253 Points
James Barrett
James Barrett
13,253 Points

Thanks, that's cleared some things up :)

Lean Rasmussen
Lean Rasmussen
11,060 Points
Lean Rasmussen
Lean Rasmussen
11,060 Points

2) The Dom is rendered it runs the code which gives mouseover and mouseout property. That function has been called. Efter the Dom has been rendered with the eventlisteners it is to late for the new li element to get the handlers.

You would need to run the functions giving the li elements the handlers again. You could run the function which gives the eventhandlers again in the function that makes your new li element. This would work.