July 27, 2016 at 11:38 pm #9957
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
What I expect to happen:
boxelements, regardless of whether it’s true or false on the
#contentelement, the event should bubble upward, and then trigger the separate click handler on the
#contentelement should fire
- And vice versa—when
#contentelement, I expect the
#contentelement’s handler to fire first, then each child box
What actually happens:
I don’t really know, it’s a little confusing. If
capturesettings, it seems like both the order and the actual event phase get confused. Locally, for instance, if I have
#content, the event phase still says
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
capturesetting, e.g. both are
true, or both are
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!July 29, 2016 at 8:38 pm #10066
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!July 30, 2016 at 3:57 am #10087
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.
vmAugust 5, 2016 at 5:25 pm #10388
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?August 11, 2016 at 10:10 pm #10633
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!August 12, 2016 at 4:23 pm #10651
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 🙂August 13, 2016 at 9:44 pm #10671
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.
You must be logged in to reply to this topic.