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)文章
jQuery回調(diào)函數(shù)的定義及用法實(shí)例
這篇文章主要介紹了jQuery回調(diào)函數(shù)的定義及用法,以實(shí)例形式詳細(xì)分析了回調(diào)函數(shù)的原理與實(shí)現(xiàn)技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jQuery實(shí)現(xiàn)帶滾動(dòng)線條導(dǎo)航效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滾動(dòng)線條導(dǎo)航效果的方法,分析了帶滾動(dòng)條導(dǎo)航效果的實(shí)現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01jQuery插件HighCharts繪制2D帶Label的折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶Label的折線圖效果,結(jié)合實(shí)例形式分析了jQuery圖形繪制插件HighCharts實(shí)現(xiàn)折線圖效果的具體操作步驟與相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery頁(yè)面圖片伴隨滾動(dòng)條逐漸顯示的小例子
jQuery頁(yè)面圖片伴隨滾動(dòng)條逐漸顯示的小例子,需要的朋友可以參考一下2013-03-03在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下2014-12-12