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

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

俗話說的好,好記性不如個爛筆頭,這麼多技術文章如果不去吃透,技術點很快就容易忘掉,下面是小編平時瀏覽的技術文章,整理的筆記,分享給大家。

開發過程中我們都希望使用別人成熟的框架,因為站在巨人的肩膀上會使得我們開發的效率大幅度提升。不過,我們也應該、必須瞭解其基本原理。比如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事件階段以及事件捕獲與事件冒泡先後執行順序(圖文詳解),希望對大家今後的工作、學習有所幫助。

您可能感興趣的文章:

js事件冒泡與事件捕獲詳解JS中繫結事件順序(事件冒泡與事件捕獲區別)淺談javascript中的事件冒泡和事件捕獲JS中事件冒泡和事件捕獲介紹javaScript 事件繫結、事件冒泡、事件捕獲和事件執行順序整理總結js事件冒泡、事件捕獲和阻止預設事件詳解javascript事件冒泡和事件捕獲詳解js之事件冒泡和事件捕獲詳細介紹一篇文章讓你徹底弄懂JS的事件冒泡和事件捕獲