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 divided into three stages sequentially: capture stage, target stage and bubble stage

Communication process

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 (default falsy value):element.addEventListener(eventType, fn, useCapture)They can then 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.

Special event

  • Some DOM events are non-bubbling, such as Blur, focus, MouseEnter, mouseleave
  • The browser forbids stopping the event from bubbling.

Stop the spread immediately.

event.stopImmediatePropagation();
  • If the nodes of the target phase are bound to multiple events, they do not distinguish between capture and bubbling, and events fire in the order in which the code executes. Event.stoppropagation () does not take effect in the target phase. If there are three triggering events a, B and C in the target phase, they will be executed in the registration order. Setting event.stopPropagation() in b event will not affect the triggering of C event. But if in the event b set event. StopImmediatePropagation (after), after the event to b will stop all events behind the trigger.

Event delegation

The principle of event delegation
  • Event delegation, also known as event delegation, is to use DOM bubbling event flow to register the least number of listeners and realize event group control for all child elements of DOM nodes.
Why use event delegate
  • Generally speaking, if an element needs to register an event, we register an event handler for that element directly. So if you have more elements, like a hundred, or more; For example, if we need to register the same click events for a hundred Li elements, we would loop through and register a hundred event handlers. In JS, the number of event handlers added to the page will be directly related to the overall running performance of the page, because the need to constantly interact with THE DOM node, the more times to access the DOM, the more times the browser will be redrawn and rearranged, which will prolong the interaction ready time of the whole page; Also, the more objects you have, the more content you consume. If you use event delegates, you can put all operations in the JS program and interact with the DOM only once to improve performance.