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 Responding to User Interaction The Event Object

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,

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

Thanks, that's cleared some things up :)

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.