DOM事件階段以及事件擷取與事件冒泡先後執行順序(圖文詳解)

首頁

web前端

js教程

DOM事件階段以及事件擷取與事件冒泡先後執行順序(圖文詳解)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

冒泡捕獲

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

開發過程中我們都希望使用別人成熟的框架，因為站在巨人的肩膀上會使得我們開發的效率大幅提升。不過，我們也應該、必須了解其基本原理。例如DOM事件，jquery框架幫我們為我們封裝、抽象化了各瀏覽器的差異行為，為事件處理帶來了極大的便利。不過瀏覽器逐步走向統一標準化，我們可以更安全地使用官方規範的介面。因為只有獲得眾多開發者的芳心，瀏覽器才會走得更遠。正如我們現在使用低版本瀏覽器開啟某些頁面時，會告知我們要用chrome等進階瀏覽器存取。不過這是一個革命的過程，為了讓我們的webPage更好地服務更多的人，現在我們還得對這些歷史遺留問題做更好的相容。要做好相容，除了依賴框架，我們得理解其基本原理。

DOM事件三個階段

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

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

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

3.冒泡階段：再從目標事件位置往文件的根節點方向回溯，從內向外冒泡事件物件。

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

事件擷取與事件冒泡先後執行順序就顯而易見了。

實驗部分

開啟線上編輯器：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的時候結果是：

outer_捕獲

middle_捕獲

inner_捕獲

inner_冒泡

middle_冒泡

outer_冒泡

由此可見：確實是先由外向內事件捕獲，一直到事發元素，在由內向外冒泡到根節點上

tips：

當事件觸發在目標階段時，會根據事件註冊的先後順序執行，在其他兩個階段註冊順序不影響事件執行順序。也就是說如果該處既註冊了冒泡事件，也註冊了捕獲事件，則按照註冊順序執行。

例如當我點擊inner的時候，按照以上順序，答案確實是我們想要的答案：

、

當我的事件註冊順序改為如下程式碼時：

當我們點擊outer：

當我們點選middle：

當我們點擊inner：

可以看出在目標階段的事發元素上的事件執行順序是有事件註冊順序決定的

以上內容就是本文對DOM事件階段以及事件捕獲與事件冒泡先後執行順序(圖文詳解)，希望對大家今後的工作、學習有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles