欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2015年08月18日 16:34:34   投稿:mrr  
DOM事件標(biāo)準(zhǔn)定義了兩種事件流,這兩種事件流有著顯著的不同并且可能對(duì)你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣,在它們成為標(biāo)準(zhǔn)之前,Netscape和微軟各自不同地實(shí)現(xiàn)了它們,下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序

俗話說(shuō)的好,好記性不如個(gè)爛筆頭,這么多技術(shù)文章如果不去吃透,技術(shù)點(diǎn)很快就容易忘掉,下面是小編平時(shí)瀏覽的技術(shù)文章,整理的筆記,分享給大家。

開發(fā)過程中我們都希望使用別人成熟的框架,因?yàn)檎驹诰奕说募绨蛏蠒?huì)使得我們開發(fā)的效率大幅度提升。不過,我們也應(yīng)該、必須了解其基本原理。比如DOM事件,jquery框架幫我們?yōu)槲覀兎庋b和抽象了各瀏覽器的差異行為,為事件處理帶來(lái)了極大的便利。不過瀏覽器逐步走向統(tǒng)一和標(biāo)準(zhǔn)化,我們可以更加安全地使用官方規(guī)范的接口。因?yàn)橹挥蝎@得眾多開發(fā)者的芳心,瀏覽器才會(huì)走得更遠(yuǎn)。正如我們現(xiàn)在使用低版本瀏覽器打開某些頁(yè)面時(shí),會(huì)告知我們要用chrome等高級(jí)瀏覽器訪問。不過這是一個(gè)革命的過程,為了讓我們的webPage更好地服務(wù)更多的人,現(xiàn)在我們還不得不對(duì)這些歷史遺留問題做更好的兼容。要做好兼容,除了依賴框架,我們得理解其基本原理。

DOM事件三個(gè)階段

當(dāng)一個(gè)DOM事件被觸發(fā)時(shí),它不僅僅只是單純地在本身對(duì)象上觸發(fā)一次,而是會(huì)經(jīng)歷三個(gè)不同的階段:

1.捕獲階段:先由文檔的根節(jié)點(diǎn)document往事件觸發(fā)對(duì)象,從外向內(nèi)捕獲事件對(duì)象;

2.目標(biāo)階段:到達(dá)目標(biāo)事件位置(事發(fā)地),觸發(fā)事件;

3.冒泡階段:再?gòu)哪繕?biāo)事件位置往文檔的根節(jié)點(diǎn)方向回溯,從內(nèi)向外冒泡事件對(duì)象。

引用來(lái)源:http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

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

實(shí)驗(yàn)部分

 打開在線編輯器: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>

當(dāng)我們點(diǎn)擊inner的時(shí)候結(jié)果是:

outer_捕獲

middle_捕獲

inner_捕獲

inner_冒泡

middle_冒泡

outer_冒泡

由此可見:確實(shí)是先由外向內(nèi)事件捕獲,一直到事發(fā)元素,在由內(nèi)向外冒泡到根節(jié)點(diǎn)上

tips:

當(dāng)事件觸發(fā)在目標(biāo)階段時(shí),會(huì)根據(jù)事件注冊(cè)的先后順序執(zhí)行,在其他兩個(gè)階段注冊(cè)順序不影響事件執(zhí)行順序。也就是說(shuō)如果該處既注冊(cè)了冒泡事件,也注冊(cè)了捕獲事件,則按照注冊(cè)順序執(zhí)行。

 例如當(dāng)我點(diǎn)擊inner的時(shí)候,按照以上順序,答案確實(shí)是我們想要的答案:

、

當(dāng)我的事件注冊(cè)順序改變成如下代碼時(shí):

當(dāng)我們點(diǎn)擊outer時(shí):

當(dāng)我們點(diǎn)擊middle時(shí):

當(dāng)我們點(diǎn)擊inner時(shí):

可以看出在目標(biāo)階段的事發(fā)元素上的事件執(zhí)行順序是有事件注冊(cè)順序決定的

以上內(nèi)容就是本文對(duì)DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解),希望對(duì)大家今后的工作、學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論