The Dom event flow
define
- The DOM (Document Object Model) structure is a tree structure. When an HTML element generates an event, the event is propagated along the path between the element node and the root node. All nodes passing through the path receive the event.
- Propagation is sequentially divided into three phases: capture phase, target phase, and bubble phase (event flow mainly has these three phases)
The specific analytical
Capture phase
Event processing starts at the root of the DOM hierarchy, rather than the target element that triggered the event, and the event is passed down from all the ancestor elements of the target element. In this process, events are captured by elements derived from each inheritance from the document root to the event target element, if the event listener is registered with the useCapture attribute set to true (the default is false): Element. addEventListener(eventType, FN, useCapture) then they can be assigned to any element in between to handle the event; Otherwise, events are passed to the next element in the path of the derived element, up to the target element.
Current target stage
Once the event reaches the target element, it enters the current target phase, executes the function code, and then it continues to bubble through the DOM node.
Bubbling phase
When an event is fired on a DOM element, such as when a user clicks the mouse on a customer name node, the event bubbles through the DOM node hierarchy with each parent node that the node inherits from until it encounters a node that is attached to a handler of that event type. The bubbling of the event can be stopped at any time during the bubbling process (call the event stopPropagation method), and if propagation of the event is not stopped, the event will continue bubbling through the DOM until it reaches the document root.
