Event phases: bubblin', capturin' clarification

[Vincent Maglione]

Hello!

I have a somewhat technical question regarding event phases.

As suggested in the video, I re-created the event bubble/capture functionality. As an experiment, though, I created an additional parent container that listens for the bubbled/captured event.

You can see sample markup JSFiddle.

So there are two event listeners: one for each box, and a separate one on the #content element.

What I expect to happen:

• When capture is false on the box elements, regardless of whether it’s true or false on the #content element, the event should bubble upward, and then trigger the separate click handler on the #content element should fire
• And vice versa—when capture is true on the box elements, but false on the #content element, I expect the #content element’s handler to fire first, then each child box

What actually happens:

I don’t really know, it’s a little confusing. If #content and .box have different capture settings, it seems like both the order and the actual event phase get confused. Locally, for instance, if I have capture set to true on box, but false on #content, the event phase still says Bubbling.

Point being: the events fire in the correct order and with the correct phase only if both the clicked element and the bubbled-to/captured-from element have the same capture setting, e.g. both are true, or both are false.

My question is this: Why? I thought that the event target’s capture setting wouldn’t make a difference to the elements up the chain.

Sorry if this is confusing or poorly worded. Been staring at this too long.

Thanks!

[Zac Gordon]

It looks to me like when you change the handleClick listener from true to false it does display the phase correctly. The handleBubbles function however is not displaying the phase so it is not showing as different when the third parameter is switched on the event listener.

Please explain further what you’re finding though in case I am missing what you’re asking about!

[Vincent Maglione]

Sorry to be unclear. I updated the Fiddle to make it a bit easier for me to visualize.

My question, more clearly (I hope), is this:

If I’ve set the .boxes to use a capturing listener, but left #content (the outermost element) as a bubbling listener, and then I click the innermost box, I expect the log to look like this:

#content heard event from b3 via Capturing // I expect this to be the first, since the event is traveling down the tree instead of up
b3 phase: Capturing
b3 phase: Capturing
b3 phase: At Target

But it happens the other way around. The .box elements react as expected, but #content still hears the event _last_, even though the event target is set to capturing. The log instead looks like this:

b3 phase: Capturing
b3 phase: Capturing
b3 phase: At Target
#content heard event from b3 via Bubbling // Instead it's last and its phase is 'bubbling'

That’s confusing to me. If the event is traveling down the tree since the listener is set to capture, why is #content still hearing it first?

I hope that makes more sense. Forgive me if I’m making this more complicated than it needs to be.

Thank you!

vm

[Zac Gordon]

Since capturing happens before bubbling, setting #content to bubbling would have it display after the inner elements, since it bubbles from the inner elements out to the outer.

If #content is set to capturing then it will display first since it is capturing from the outer elements down into the inner.

Does that make more sense?

[Vincent Maglione]

Know what? My mental model of the event system was wrong. Reading the spec helped.

I was getting tripped up because I kept thinking the event listener on the event target determined the actual phase of the event—but now I understand that it does no such thing. (I also sorta thought the event object traveled from the event target, except in the case of capturing events, but that’s also wrong.)

If I’m understanding correctly (please correct me if I’m wrong): the event travels down and then up through the DOM tree no matter what’s listening, unless we use the preventDefault or stopPropagation methods.

That makes the listener order much clearer to me now. Event travels from window to event.target and back to window regardless of how it’s heard along the way. Listeners just execute callbacks when they hear ’em.

You made that clear in the video—I just misunderstood. Thank you for your patience!

[Zac Gordon]

Hey Vincent!

You completely got it 🙂 Your thought on the event starting at the target is quite common, but you are correct that the event starts at the document root and captures down first before bubbling back up from the event.

Glad you’ve got it now 🙂

[Juliette Tworsey]

Hi Vincent and Zac! I have been following this thread to get a better grasp on event phases with regards to bubbling and capturing. ….just wanted to say thanks to you both for helping me to also gain a deeper understanding on this.

Cheers:-)

[Author]

Posts