DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)

更新時間：2015年08月18日 16:34:34 投稿：mrr

DOM事件標準定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對你的應用有著相當大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術一樣，在它們成為標準之前，Netscape和微軟各自不同地實現(xiàn)了它們，下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序

俗話說的好，好記性不如個爛筆頭，這么多技術文章如果不去吃透，技術點很快就容易忘掉，下面是小編平時瀏覽的技術文章，整理的筆記，分享給大家。

開發(fā)過程中我們都希望使用別人成熟的框架，因為站在巨人的肩膀上會使得我們開發(fā)的效率大幅度提升。不過，我們也應該、必須了解其基本原理。比如DOM事件，jquery框架幫我們?yōu)槲覀兎庋b和抽象了各瀏覽器的差異行為，為事件處理帶來了極大的便利。不過瀏覽器逐步走向統(tǒng)一和標準化，我們可以更加安全地使用官方規(guī)范的接口。因為只有獲得眾多開發(fā)者的芳心，瀏覽器才會走得更遠。正如我們現(xiàn)在使用低版本瀏覽器打開某些頁面時，會告知我們要用chrome等高級瀏覽器訪問。不過這是一個革命的過程，為了讓我們的webPage更好地服務更多的人，現(xiàn)在我們還不得不對這些歷史遺留問題做更好的兼容。要做好兼容，除了依賴框架，我們得理解其基本原理。

DOM事件三個階段

當一個DOM事件被觸發(fā)時，它不僅僅只是單純地在本身對象上觸發(fā)一次，而是會經歷三個不同的階段：

1.捕獲階段：先由文檔的根節(jié)點document往事件觸發(fā)對象，從外向內捕獲事件對象；

2.目標階段：到達目標事件位置（事發(fā)地），觸發(fā)事件；

3.冒泡階段：再從目標事件位置往文檔的根節(jié)點方向回溯，從內向外冒泡事件對象。

引用來源：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

事件捕獲與事件冒泡先后執(zhí)行順序就顯而易見了。

實驗部分

打開在線編輯器：http://jsbin.com/goqede/edit?html,css,js,output

代碼如下：

<!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>

當我們點擊inner的時候結果是：