The basic process of event flow:
1. Determine the event object propagation path. The propagation path propagation path is an ordered list of current event targets ( current event targets ) formed by events flowing through (passing) .
2. Capture phase: The event object is propagated from the window (document root node, possibly document, browsers are different) to the direct parent node of the target node.
3. Target phase: The event object reaches the event target node
4. Bubbling Phase: Propagating from the parent node of the target to the root node
The following is a lame translation from the official website:
Event dispatch and DOM event flow
Applications can use the dispatchEvent() method to dispatch event objects, which will be propagated through the DOM tree determined by the DOM event stream.
An illustration of an event dispatch in the DOM tree using DOM event flow
The event object is dispatched to an event target event target . But before the dispatch starts, the propagation path of the event object must be determined . .
A propagation path is an ordered list of current event targets over which events flow (through) . The propagation path reflects the hierarchical tree structure of the document. The last item in the list is the event target event target , and the items earlier in the list are called target's ancestors , with the immediate predecessor being the target's parent .
Once the propagation path is determined , the event object goes through one or more event phases . There are three event phases: the capture phase , the target phase , and the bubble phase . The event object is done as described below. stage. If the phase is not supported, or the propagation of the event object is stopped, the phase will be skipped. For example, if the bubbles property is set to false, the bubbling phase is skipped, and if stopPropagation() is called before dispatch , then All stages are skipped. .
- Capture phase capture phase : The event object is propagated from the Window to the target's parent (node) through the target's ancestor node . This phase is called the capture phase.
- target phase target phase : The event object reaches the event target event target of the event object . This phase is called "at-target phase" at-target phase . If the event type event type specifies that the event does not bubble, then the event object will complete in this phase stop after.
- Bubble phase : Event objects propagate through the target's ancestors in reverse order, starting with the target's parent and ending with Window . This phase is called the bubbling phase.
Reference: https://www.w3.org/TR/DOM-Level-3-Events/#event-flow