俗話說的好，好記性不如個爛筆頭，這么多技術文章如果不去吃透，技術點很快就容易忘掉，下面是小編平時瀏覽的技術文章，整理的筆記，分享給大家。
開發過程中我們都希望使用別人成熟的框架，因為站在巨人的肩膀上會使得我們開發的效率大幅度提升。不過，我們也應該、必須了解其基本原理。比如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事件階段以及事件捕獲與事件冒泡先后執行順序(圖文詳解)，希望對大家今后的工作、學習有所幫助。
新聞熱點
疑難解答
