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 Event Bubbling and Delegation

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

2 Answers

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,864 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. -)