The Execution Order of Event Listeners in the Target Phase

Alex Reardon
InstructorAlex Reardon
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

This lesson explores some of the strangeness of the target phase, including the execution of capture and bubble phase event listeners added to the event target.

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.

egghead
egghead
~ 41 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today