[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!

[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

[Author]

Posts