Event Bubbling vs. Event Capturing

Thanks, and as you write "the li is a descendant, and so the event bubbles up to it's ancestors." However, the method addEventListener() is affixed to the div. So any activity on the div element triggers the event. Then the event would bubble up to the body element and then ultimately to the document. Meanwhile, the descendants remain unaffected.

Or is it the case that activity on elements lower on the tree (p, button, ul and li) are, in a sense, always producing event data? And the effects of that activity, or events, get sent up the tree eventually running into the addEventListener() as if it were a net ready to capture user actions? I had suspected adding the addEventListener() to an element meant that element would be generating the data (or more precisely, the event object). But it sounds like all the elements are generating events all the time and you have to add that method in a spot where you can actually capture all that data that is bubbling up.

I think I know the answer, but I've had to spell it out here to be clear.

The event bubbles up to where the listener is attached.

Yes you could generate an event on the parent itself, but the bubbling occurs when you generate the event on the child and the listener on the parent/ancestor receives it.

So when you click on the li, you generate an event, but if it has no listener it bubbles up to the ul, and then to the div where it finally triggers the listener attached there.

Does that clear it up?

What's interesting to me — because I'd never realized this when I've used the addEventListener() method in the past — is that events are always being generated. I had mentally connected the method with events, so I incorrectly assumed no events were being generated if JavaScript wasn't set up to capture them.

In my original question I wrote —

The idea is to affect all the li elements with just one application of the event listener to their ancestor.

The above assertion is incorrect because it assumes the event listener on the div is affecting the li elements. The li elements will continue to generate event objects whether or not the addEventListener() is there. The addEventListener() affects nothing. It only makes note of what is already occurring.

What I'm picturing is a number of lowly elements stacked close to the ground. As a mouse moves among them, they release helium balloons. These balloons rise and contain event objects. Now, if there is nothing to capture them then they will continue to rise and disappear into the sky. However, if we set up a net — in the form of the addEventListener() method — to capture these balloons, then we can get at the event data that's contained inside those balloons.

We may not even care to access the event objects — so we don't have to bother setting a net. But if we do care then that's when we set the net.

Thanks for the clarification.

A very colorful analogy! I've pictured bubbles rising through plumbing myself, where the plumbing is the DOM tree.

But without looking into the internals of the JavaScript engine, we don't know for sure if the events occur when there's nothing listening. It could be that they are only generated if there's a listener attached somewhere up the tree. But as you say, we don't really care if they are generated or not unless we listen. And then we know that they are generated.

But without looking into the internals of the JavaScript engine, we don't know for sure if the events occur when there's nothing listening.

"If a tree falls in a forest and no one is around to hear it, does it make a sound?"

I don't know who would readily have the answer to the JS engine question. It would be nice to know. Rarely do I find resources that discuss such things (especially for the uninitiated). For better or worse, I understand concepts better when familiar with their functioning on the most minute level — easier then to make colorful analogies. Thanks again.

I almost used that "tree falls" quote in my last comment! And whether or not event generation is triggered by the presence of a listener is such a specific implementation issue that it might not even be done the same way in all browsers. We may never know, but we don't need to since it won't affect the function of our program either way. We can still mentally picture bubbles and balloons as we wish.

Hi Lee,

With your net analogy and "capturing the balloons" are you thinking that the event listener is capturing the events and stopping further propagation?

If so, attaching an event listener to an element only means that the element is able to process that event if that particular event happens to reach that element. It does not keep it from further propagating. In this lesson, the div, ul, and li's could all have listeners attached to them and they all would run.

You would have to use event.stopPropagation() or event.stopImmediatePropagation() if you wanted to actually capture the event and stop it from further propagating. These methods would be closer to your analogy of having a net.

Also, in regards to capturing vs. bubbling, both of these things are occurring in modern browsers. It goes capturing phase > target phase > bubbling phase

listeners in the capturing phase will execute top to bottom and it's bottom to top in the bubbling phase.

event listeners are registered by default with the bubbling phase so that's why the video only mentions the bubbling phase. Nothing is happening with the capturing and target phases.

Thanks for the additional info, Jason.