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

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.

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