Deep understanding of JS DOM event mechanism _javascript techniques

1. Event Flow

The order in which the HTML elements trigger events.

2, event bubbling IE event flow is called event bubbling, that is, when the event started by the most specific elements (the document is the deepest nesting node) received, and then gradually propagated to the less specific node (document). 3. Event capture events capture the idea that less specific nodes should receive events earlier, and that the most specific nodes should receive the node at the end. Event capture is intended to capture an event before it reaches a predetermined target.

DOM Event Stream
the event flow specified in the DOM2 level event flow consists of three phases: the event capture phase, the target phase, and the bubbling phase. The first thing that happens is event capture, which provides an opportunity to intercept events. Then the actual target receives the event. The final stage is the bubbling phase, where the event can be responded to at this stage. As an example of a simple HTML page, clicking the <div> element triggers the event in the order shown below.

In the DOM event stream, the actual target (<div> element) does not receive an event during the capture phase. This means that during the capture phase, events are stopped from document to Most browsers that support DOM event streams implement a specific behavior, even though the "DOM2 event" specification explicitly requires that the capture phase not involve the target of the event, Safari, Chrome, Firefox, and Opera9.5 and later triggers events on the event object during the capture phase. As a result, there are two opportunities to manipulate events above the target object.

Block event bubbling

Experiment

<! DOCTYPE html>