DOM event stage and event capture and event bubbling execution sequence (detailed graphic and text explanation)

DOM event stage and event capture and event bubbling execution sequence (detailed graphic and text explanation)_jquery

WBOY

Release： 2016-05-16 15:44:25

Original

1856 people have browsed it

As the saying goes, a good memory is not as good as a bad pen. If you don’t thoroughly understand so many technical articles, it will be easy to forget the technical points quickly. Below are the technical articles that the editor usually browses, and the notes I compiled to share with you.

During the development process, we all hope to use other people’s mature frameworks, because standing on the shoulders of giants will greatly improve the efficiency of our development. However, we should also and must understand its basic principles. For example, for DOM events, the jquery framework helps us encapsulate and abstract the different behaviors of various browsers, bringing great convenience to event processing. However, browsers are gradually becoming unified and standardized, and we can use official standardized interfaces more safely. Because only by winning the hearts and minds of many developers can the browser go further. Just like when we use a lower version browser to open certain pages, we will be told to use an advanced browser such as Chrome to access it. But this is a revolutionary process. In order to make our webPage better serve more people, we now have to be better compatible with these historical issues. To be compatible, in addition to relying on the framework, we must understand its basic principles.

Three stages of DOM events

When a DOM event is triggered, it is not simply triggered once on the object itself, but will go through three different stages:

1. Capture phase : First, go from the root node document of the document to the event trigger object, and capture the event object from the outside in;

2. Target stage : Arrive at the target event location (where the incident occurred) and trigger the event;

3. Bubble stage : Then trace back from the target event location to the root node of the document, and bubble the event object from the inside out.

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

The order of event capture and event bubbling is obvious.

Experimental part

Open the online editor: http://jsbin.com/goqede/edit?html,css,js,output

The code is as follows:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-">
   <title>Document</title>
   <style>
     #outer{
       text-align: center;
       width: px;
       height: px;
       background-color: #ccc;
       margin: auto;
     }
     #middle{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
     }
     #inner{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
       border-rad
     }
   </style>
 </head>
 <body>
   <div id='outer'>
     <span>outer</span>
     <div id='middle'>
       <span>middle</span>
       <div id='inner'>
         <span>inner</span>
       </div>
     </div>
   </div>
   <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_捕获");
       alert("outer_捕获");
     }
     function m_click_c(){
       console.log("middle_捕获")
       alert("middle_捕获");
     }
     function i_click_c(){
       console.log("inner_捕获")
       alert("inner_捕获");
     }
     function o_click_b(){
       console.log("outer_冒泡")
       alert("outer_冒泡");
     }
     function m_click_b(){
       console.log("middle_冒泡")
       alert("middle_冒泡");
     }
     function i_click_b(){
       console.log("inner_冒泡")
       alert("inner_冒泡");
     }
   </script>
 </body>
 </html>

Copy after login

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 from the outside inward first, until the event element is reached, and then bubbles up to the root node from the inside out

tips:

When an event is triggered in the target stage, it will be executed according to the order of event registration. The order of registration in the other two stages does not affect the order of event execution. That is to say, if both bubbling events and capture events are registered here, they will be executed in the order of registration.

For example, when I click inner, according to the above order, the answer is indeed the answer we want:

When my event registration sequence is changed to the following code:

When we click outer:

When we click on middle:

When we click inner:

It can be seen that the order of event execution on the event element in the target stage is determined by the order of event registration

The above content is the DOM event stage and the execution sequence of event capture and event bubbling in this article (detailed pictures and texts). I hope it will be helpful to everyone's future work and study.