Forum Replies Created
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
That makes the listener order much clearer to me now. Event travels from
event.targetand back to
windowregardless 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 MaglioneParticipant
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
.boxesto 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
.boxelements react as expected, but
#contentstill 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
#contentstill hearing it first?
I hope that makes more sense. Forgive me if I’m making this more complicated than it needs to be.