The target phase is the moment an event is dispatched to the element that received it. It sits between capture, which travels down the document tree, and bubbling, which travels back up. section 8.3.1
Event dispatch proceeds through three stages:
- Capture phase: dispatches events from window through each ancestor toward the target. section 8.3.1
- Target phase: dispatches the event on the target element itself. section 8.3.1
- Bubble phase: dispatches events from the target’s parent back through the ancestors to window. section 8.3.1
Listening at the target
A normal JavaScript listener uses element.addEventListener("click", onClick);. The default listener observes bubbling and target phases. Add { capture: true } as the third argument when listening during capture instead. section 8.3.1
Figure 8.7 When you click the black button, the browser will start propagating events throughout the nodes in the document starting at the window, moving down through the document tree in the capture phase until the target, and then moving back up the tree in the bubbling phase until it reaches the window.
Trace a click on the black button as it travels down from window to the target and then back up through the document tree. section 8.3.1
