DOM Event phase and event-capturing and event-bubbling sequential sequence (text and texts) _jquery

As the saying goes, good memory is inferior to a rotten pen, so many technical articles if not to thoroughly grasp, technical points soon easy to forget, the following is a small series of the usual browsing of technical articles, collated notes, to share to everyone.

In the development process we all want to use other people's mature framework, because standing on the shoulders of Giants will enable us to develop a significant increase in efficiency. However, we should also, must understand its rationale. Such as DOM events, the jquery framework helps us to encapsulate and abstract the differences between browsers, which is a great convenience for event handling. But as browsers move towards unification and standardization, we can use the official interface more securely. Because only the hearts of many developers, the browser will go farther. As we now open some pages with a lower version of the browser, we are told to use advanced browsers such as chrome to access. But this is a revolutionary process, and in order for our webpage to better serve more people, now we have to be more compatible with these legacy issues. To be compatible, we have to understand the rationale, in addition to the dependency framework.

Dom Event three phases

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

1. Capture phase : First, the document root node documents to the event trigger object, from the outside to capture the event object;

2. Target stage : To reach the target event location (the incident), triggering events;

3. Bubbling phase : Again from the target event location to the document's root node in the direction of backtracking, from the Inside Out bubble event objects.

Source of reference: http://www.w3.org/TR/DOM-Level-3-Events/

The sequence of event capture and event bubbling is obvious.

Experimental section

Open Online Editor: Http://jsbin.com/goqede/edit?html,css,js,output

The

Code is as follows:

<! DOCTYPE html>  

When we clicked on the inner, the result was:

Outer_ capture

Middle_ capture

Inner_ capture

Inner_ bubbling

Middle_ bubbling

Outer_ bubbling

This shows: It is really the first from the outside of the event capture, until the incident element, from the inward bubbling to the root node

Tips

When an event is triggered at the target stage, it is executed according to the order in which the event is registered, and the Order of registration in the other two phases does not affect the order of event execution. That is, if the place has both registered bubble events and a capture event, it is executed in the order of registration.

For example, when I click on the inner, in this order, the answer is really the answer we want:

、

When my event registration sequence changes to the following code:

When we click Outer:

When we click middle:

When we click Inner:

You can see that the sequence of event execution on the incident element in the target phase is determined by the event registration order.

The above content is this article to the DOM event phase as well as the event capture and the event bubble successively execution order (the picture and text explanation), hoped for everybody future work, the study has the help.