DOM事件階段以及事件捕獲與事件冒泡前後執行順序

時間 2019-12-10

標籤 dom 事件階段以及捕獲冒泡前後執行順序欄目 HTML 简体版

原文原文鏈接

平時瀏覽這麼多技術文章，如過不去實踐、深刻弄透它，這個技術點很快就會在腦海裏模糊。要加深印象，就得好好過一遍。重要的事情說三遍，重要的知識寫一遍。javascript

開發過程當中咱們都但願使用別人成熟的框架，由於站在巨人的肩膀上會使得咱們開發的效率大幅度提高。不過，咱們也應該、必須瞭解其基本原理。好比DOM事件，jquery框架幫咱們爲咱們封裝和抽象了各瀏覽器的差別行爲，爲事件處理帶來了極大的便利。不過瀏覽器逐步走向統一和標準化，咱們能夠更加安全地使用官方規範的接口。由於只有得到衆多開發者的芳心，瀏覽器纔會走得更遠。正如咱們如今使用低版本瀏覽器打開某些頁面時，會告知咱們要用chrome等高級瀏覽器訪問。不過這是一個革命的過程，爲了讓咱們的webPage更好地服務更多的人，如今咱們還不得不對這些歷史遺留問題作更好的兼容。要作好兼容，除了依賴框架，咱們得理解其基本原理。css

DOM事件三個階段html

當一個DOM事件被觸發時，它不單單只是單純地在自己對象上觸發一次，而是會經歷三個不一樣的階段：java

捕獲階段：先由文檔的根節點document往事件觸發對象，從外向內捕獲事件對象；
目標階段：到達目標事件位置（事發地），觸發事件；
冒泡階段：再從目標事件位置往文檔的根節點方向回溯，從內向外冒泡事件對象。

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

事件捕獲與事件冒泡前後執行順序就顯而易見了。web

實驗部分chrome

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

代碼以下：安全

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #outer{
 8             text-align: center;
 9             width: 400px;
10             height: 400px;
11             background-color: #ccc;
12             margin: 0 auto;
13         }
14         #middle{
15             width: 250px;
16             height: 250px;
17             background-color: #f00;
18             margin: 0 auto;
19         }
20         #inner{
21             width: 100px;
22             height: 100px;
23             background-color: #0f0;
24             margin: 0 auto;
25             border-rad
26         }
27     </style>
28 </head>
29 <body>
30     <div id='outer'>
31         <span>outer</span>
32         <div id='middle'>
33             <span>middle</span>
34             <div id='inner'>
35                 <span>inner</span>
36             </div>
37         </div>
38     </div>
39     <script>
40         function $(element){
41             return document.getElementById(element);
42         }
43         function on(element,event_name,handler,use_capture){
44             if(addEventListener){
45                 $(element).addEventListener(event_name,handler,use_capture);
46             }
47             else{
48                 $(element).attachEvent('on'+event_name,handler);
49             }
50         }
51 
52         on("outer","click",o_click_c,true);
53         on("middle","click",m_click_c,true);
54         on("inner","click",i_click_c,true);
55 
56         on("outer","click",o_click_b,false);
57         on("middle","click",m_click_b,false);
58         on("inner","click",i_click_b,false);
59         
60         
61 
62         function o_click_c(){
63             console.log("outer_捕獲");
64             alert("outer_捕獲");
65         }
66         function m_click_c(){
67             console.log("middle_捕獲")
68             alert("middle_捕獲");
69         }
70         function i_click_c(){
71             console.log("inner_捕獲")
72             alert("inner_捕獲");
73         }
74         function o_click_b(){
75             console.log("outer_冒泡")
76             alert("outer_冒泡");
77         }
78         function m_click_b(){
79             console.log("middle_冒泡")
80             alert("middle_冒泡");
81         }
82         function i_click_b(){
83             console.log("inner_冒泡")
84             alert("inner_冒泡");
85         }
86     </script>
87 </body>
88 </html>