Why is this parent event handler activated by it's child element?

JavaScript
1 
const ul = document.querySelector('ul');


ul.addEventListener('click', (evt) => {
  console.log(evt); 
  console.log(evt.target)
  evt.stopPropagation();
 });

Hi , I am currently going through the process of learning and understanding vanilla javascript and I am currently stuck on this concept of event bubbling. As I understand it , whenever a event handler is activated then that action triggers all other events(if there are any ) moving throughout the ancestors eventually stopping at the html node.

What I dont get is that in the code above , the ul is being triggered or activated by the li’s
even though I dont have any event handlers tied to the li. If the event bubbling is supposed to go through the ancestors towards the html node , and the event handler itself is tied to the parent element (ul) , then why is it activating when I click on the li elements ?

Update after Solved: I looked into this a bit more and another concept that I seemed to misunderstand was that I thought event handlers were the cause of event bubbling. However , I just tested this by creating an event handler on the body while I console.log the event target and while adding some paragraphs. Each time I clicked on the paragraphs (an event) , it would bubble up to the body event handler regardless of whether or not the child element paragraphs i clicked had an event handler. So the activation of an event bubbling doesnt require an event handler , only an event itself.

2

Event bubbling doesn’t require the child to have a listener to bubble up. Unless you want to stop it from bubbling, you will want to use an event listener to stop the propagation, but otherwise, it will always bubble up.

Here’s an MDN article:

Here’s a nice explanation:

Here’s a simple example:

3

Well, you’re clicking on the <ul>, how could you not be?

5

That makes a lot of sense. So would it be safe to say then that any elements that are "tied " to each other will have that effect ? Because it is actually impossible to click the parent element in these situations … I feel stupid now :grinning: .

6

Yep. It’s easier to show: the outer element is the ul, the inner green ones are li

Screenshot_20210104-033535
Screenshot_20210104-0335351549Ă—2048 159 KB

So logically, you can’t click anywhere in the outer area without it meaning you’ve clicked on the ul. Now, you can put a condition in the callback that says “if the event target is a list element, don’t do anything” and it will only do anything if you click inside the ul area but not in a li area (this is useful in some circumstances). It’ll still pick the event up, it just won’t go any further

Edit: Don’t feel daft though, it’s very easy to get stuck in rabbit holes of technical explanations when there’s a simple solution (that will, unfortunately, keep happening no matter how much you learn :confused:)

1 Like
7

Thank you, I will look these over but I think I understand it now . I was struggling with the bubbling starting with the child element when the actual event handler was a parent so it bubbling up would have never affected its own child element as it would have moved towards its own ancestors. I think my mistake was that I overlooked the fact that you cant interact(clicking) with the ul without doing so to its li’s as well.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.