The DOM event flow has three phases: capture phase, target phase, and bubble phase.

1. Capture phase

When we do something at a node in the DOM tree (click, mouse move up, for example), an event is emitted. The event is emitted from the Window and passes through the lower nodes to the target node. The process before reaching the target node is called the Capture Phase. Events are received by page elements, level by level, down to specific elements.Copy the code

2. Goal stage

The target phase is when the event is continuously passed to the target node, and finally the event is triggered on the target node. The concrete elements themselves.Copy the code

3. Bubble stage

Event bubbling is when an event starts, it is received by the most specific element (that is, the node where the event occurred), and then propagated progressively to less specific nodes. Instead of capturing, the concrete elements themselves, step by step, go up to the page elements (the event binding we usually use takes advantage of the event bubble principle). Event capture: When event capture is used, the parent element fires first, followed by the child element. Event bubbling: When event bubbling is used, child elements fire first, followed by parent elements.Copy the code

4. Prevention methods

To prevent event propagation: In W3C, use stopPropagation(). Use the cancelBubble = true method in IE. PreventDefault behavior: in W3c, use the preventDefault () method. Return false in IE.Copy the code