The Execution Order of Event Listeners in the Target Phase

Instructor: [0:01] when an event target participates in a tree of event targets. An event has three phases.

[0:08] A capture phase as the event moves down towards the event target, the target phase as the event travels through the event target, and then the bubble phase as the event travels back up towards the root.

[0:19] The target phase of an event has some really interesting characteristics. Firstly, it's not possible to add event listeners explicitly in the target phase. You can only add them in the capture phase or in the bubble phase. Event listeners will be called in the target phase as a byproduct of being attached to the target of the event.

[0:40] Here, I can see that an event listener added to the child event target will be called in the capture phase. However, if I change the event target to now be child, then we'll see that this event listener, without changing anything about it, will now be called in the target phase.

[0:56] When on the target of an event, all event listeners attached to that event target will be called in the target phase. However, event listeners added in the capture phase will be executed before listeners that were added in the bubble phase even though they're all called in the same target phase of the event.

[1:16] Another perhaps unexpected behavior is that even if an event does not bubble, event listeners added in the bubble phase of an event will still be executed on the event target, and they'll be called in the target phase.

[1:31] You can see up here, there were other event listeners added to parents of the first grandchild event target which weren't executed, but the event listeners added in the bubble phase on the event target were executed.