【前言】
DOM事件標准定義了兩種事件流，這兩種事件流有着顯著的不同並且可能對你的應用有着相當大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術一樣，在它們成為標准之前，Netscape和微軟各自不同地實現了它們，下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執行順序
【主體】
要做好兼容，除了依賴框架，我們得理解其基本原理。
DOM事件三個階段
當一個DOM事件被觸發時，它不僅僅只是單純地在本身對象上觸發一次，而是會經歷三個不同的階段：
1.捕獲階段：先由文檔的根節點document往事件觸發對象，從外向內捕獲事件對象；
2.目標階段：到達目標事件位置（事發地），觸發事件；
3.冒泡階段：再從目標事件位置往文檔的根節點方向回溯，從內向外冒泡事件對象。
事件捕獲與事件冒泡先后執行順序就顯而易見了。
<!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>
.