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

Murilo de Melo
Murilo de Melo
13,962 Points

Why the event listener was not applied directly to the <ul> element?

I'm confused about two things:

1) The elements we're interested in are the <li> elements, so why not to place the event listener to the parent <ul>?

2) If we apply the event listener to the ancestor of <ul>, couldn't that affect the other elements in within the ancestor scope?

tnx

James Croxford
James Croxford
12,591 Points

1) The elements we're interested in are the <li> elements, so why not to place the event listener to the parent <ul>?

You definitely could just place the event listener on the <ul> element, with <ul> being a direct ancestor of the <li> elements. Also it's not like we need to apply the upper/lower case functionality to any other descendant element of the div class. I imagine though the class has written done this way for speed- as it happens there is already a class name applied to the div element ("list"), and an accompanying selector variable in the app.js file (listDiv). So by using the <div> ancestor of the <li> tags, it is quicker to get the code written up!

2) If we apply the event listener to the ancestor of <ul>, couldn't that affect the other elements in within the ancestor scope?

So my understanding would be that for any element which is a descendant of the one we have applied the addEventListener to (in this case the div element), then a 'click' event registered (on say an <li>) would bubble up to the listener. In other words, a parent experiences the same event a child does because of event bubbling. BUT, as you'll see in the following class, there is an way (using something called the event object) which will let the listener know which child element received the 'click' event/where it bubbled up from.

Ruslan Inalov
Ruslan Inalov
5,116 Points

about first question:

i would say he intentionally applied event listener to <div> and not <ul> to show us the problem it cause with siblings of <ul> (getting unwanted handler) and how to solve that problem with "if () {}" statement in the next video. -)