DOM Event stage and event capture and event bubbling sequence (graphic details) _ jquery

The DOM Event standard defines two event streams, which are significantly different and may have a considerable impact on your application. The two event streams are capture and bubble. Like many Web technologies, before they become standards, Netscape and Microsoft implement them differently. The following describes the DOM Event stage and the sequence of event capture and event bubbling execution as the saying goes, good memory is not as bad as a pen. If so many technical articles are not thoroughly understood, the technology points will soon be easy to forget. Below is a small series of technical articles that are usually browsed, sorted out notes, and shared with you.

In the development process, we all hope to use other mature frameworks, because standing on the shoulders of giants will greatly improve our development efficiency. However, we also need to understand the basic principles. For DOM events, the jquery framework helps us encapsulate and abstract the different behaviors of various browsers and greatly facilitate event processing. However, browsers are gradually unified and standardized, so that we can use official interfaces more securely. The browser can go further only by gaining the attention of many developers. As we open some pages in earlier browsers, we will be notified to use chrome and other advanced browsers for access. However, this is a revolutionary process. To make our webPage better serve more people, we still have to make better compatibility with these historical issues. To ensure compatibility, apart from relying on the framework, we must understand its basic principles.

Three phases of DOM events

When a DOM event is triggered, it is not only triggered once on its own object, but also goes through three different stages:

1. Capture phase: First, the document of the root node of the document triggers the event object and captures the event object from the external node;

2. Target stage: The event is triggered when the target event location is reached;

3. Bubble stage: Traces back from the target event location to the root node of the document, and bubbles event objects from the inside to the outside.

Source: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

The sequence of event capture and event bubbling is obvious.

Lab Section

Open Online Editor: http://jsbin.com/goqede/edit? Html, css, js, output

The Code is as follows:

     
    Document        
Outer
Middle
Inner
     
   
Script function $ (element) {return document. getElementById (element);} function on (element, event_name, handler, use_capture) {if (addEventListener) {$ (element ). addEventListener (event_name, handler, use_capture);} else {$ (element ). attachEvent ('on' + event_name, handler) ;}}on ("outer", "click", o_click_c, true); on ("middle", "click", m_click_c, true); on ("inner", "click", I _click_c, true); on ("outer", "click", o_click_ B, false); on ("middle ", "click", m_click_ B, false); on ("inner", "click", I _click_ B, false); function o_click_c () {console. log ("outer _ capture"); alert ("outer _ capture");} function m_click_c () {console. log ("middle _ capture") alert ("middle _ capture");} function I _click_c () {console. log ("inner _ capture") alert ("inner _ capture");} function o_click_ B () {console. log ("outer _ bubble") alert ("outer _ bubble");} function m_click_ B () {console. log ("middle _ bubble") alert ("middle _ bubble");} function I _click_ B () {console. log ("inner _ bubble") alert ("inner _ bubble");} script 

When we click inner, the result is:

Outer _ capture

Middle _ capture

Inner _ capture

Inner _ bubble

Middle _ bubble

Outer _ bubble

It can be seen that the event is captured first from the external event to the event element, and then bubbling from the internal to external to the root node.

Tips:

When an event is triggered in the target phase, it is executed in the order of event registration. The registration sequence in the other two phases does not affect the event execution sequence. That is to say, if both a bubble event and a capture event are registered, the event is executed in the registration order.

For example, when I click inner, in the above Order, the answer is indeed what we want:

,

When the order of event registration changes to the following code:

When we click outer:

When we click middle:

When we click inner:

We can see that the event execution sequence on the incident elements in the target stage is determined by the event registration sequence.

The above content is the sequence of DOM Event phases, event capturing, and event bubbling (graphic explanation). I hope it will help you in your future work and study.