DOM事件階段以及事件擷取與事件冒泡先後執行順序(圖文詳解)_jquery
俗話說的好，好記性不如個爛筆頭，這麼多技術文章如果不去吃透，技術點很快就容易忘掉，下面是小編平時瀏覽的技術文章，整理的筆記，分享給大家。
開發過程中我們都希望使用別人成熟的框架，因為站在巨人的肩膀上會使得我們開發的效率大幅提升。不過，我們也應該、必須了解其基本原理。例如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事件階段以及事件捕獲與事件冒泡先後執行順序(圖文詳解)，希望對大家今後的工作、學習有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
掌握JavaScript中常見的事件冒泡機制
Feb 19, 2024 pm 04:43 PM
JavaScript中常見的冒泡事件：掌握常用事件的冒泡特性，需要具體程式碼範例引言：在JavaScript中，事件冒泡是指事件會從嵌套層次最深的元素開始向外層元素傳播，直到傳播到最外層的父級元素。了解並掌握常見的冒泡事件，可以幫助我們更好地處理使用者互動和事件處理。本文將介紹一些常見的冒泡事件，並提供具體的程式碼範例來幫助讀者更好地理解。一、點擊事件（click
哪些JS事件不會向上傳播？
Feb 19, 2024 am 08:17 AM
JS事件中哪些不會冒泡？在JavaScript中，事件冒泡是指當一個元素觸發了某個事件時，該事件會逐級向上冒泡到更高層的元素，直到冒泡到文檔根節點。然後，事件處理程序會依照冒泡的順序依序執行。然而，並不是所有的事件都會冒泡。有些事件觸發後只會執行目標元素上的事件處理程序，而不會冒泡到更高層的元素上。以下是一些常見的不會冒泡的事件：focus和blur事件：
為何同一事件會觸發兩次冒泡？
Feb 19, 2024 pm 10:34 PM
為何同一個事件冒泡會重複發生兩次？事件冒泡是瀏覽器中常見的事件傳遞機制。當一個元素觸發了某個事件，這個事件將會從被觸發的元素開始向上級元素依序傳遞，直到傳遞到了文件的根元素。這個過程就像水泡在水中冒起，所以被稱為事件冒泡。然而，有時我們會發現同一個事件冒泡會重複發生兩次，這是為什麼呢？原因主要有兩個面向：事件註冊和事件處理。首先，我們需要先明確的是，事件
先捕獲還是先冒泡？解析事件流程的優劣勢
Feb 21, 2024 pm 02:36 PM
先捕獲還是先冒泡？解析事件流程的優劣勢事件流程是Web開發中一個重要的概念，它描述了事件從發生到被處理的過程。在處理事件時，有兩種主要的流程模型：先捕捉後冒泡和先冒泡後捕捉。這兩種模式在不同的場景下各有優劣勢，需要根據實際情況選擇合適的模式。先捕獲後冒泡是指在事件冒泡階段前，先執行事件捕獲階段。事件捕獲階段從事件目標的根節點開始，逐級向下傳遞，直到到達目標元
點擊事件的冒泡機制及其在網頁互動中的影響
Jan 13, 2024 pm 02:34 PM
點擊事件冒泡的作用及其對網頁互動的影響在網頁開發中，事件是實現互動和回應使用者操作的關鍵。其中，事件冒泡是一種常見的事件機制，它允許一個嵌套的元素層次結構中的事件同時被多個元素回應。本文將詳細解釋點擊事件冒泡的作用，並說明它對網頁互動的影響，同時提供一些具體的程式碼範例。一、點選事件冒泡的概念點選事件冒泡（ClickEventBubbling）指的是當一個元
如何在MacBook Pro上截圖
Jul 19, 2023 pm 07:53 PM
本指南將向您展示您必須在MacBookPro上截圖。 MacBook以其時尚的設計和強大的性能而聞名，但這些功能強大的筆記型電腦具有許多經常被忽視的便捷功能。其中一個功能是用於擷取螢幕截圖的內建工具。本文將逐步指導您如何在MacBookPro上截圖，無論您是要擷取整個螢幕還是僅擷取螢幕的特定部分。什麼是螢幕截圖？螢幕截圖，也稱為螢幕截圖，是由電腦或行動裝置拍攝的數位影像，用於記錄螢幕上可見的項目。螢幕截圖通常用於創建您無法輕鬆另存為文件的圖像或文字的記錄、與他人共享螢幕視圖或建立指南和教程，就像
異常處理：PHP中如何捕獲和處理異常？
Dec 18, 2023 pm 12:52 PM
異常處理：PHP中如何捕獲和處理異常？在PHP開發中，異常處理是非常重要的一環。當程式發生意外情況或錯誤時，我們需要透過捕獲和處理異常來確保程式的正常運作。 PHP中提供了一套異常處理的機制，本文將介紹如何在PHP中擷取和處理異常，並提供具體的程式碼範例。一、PHP中異常的基本概念在PHP中，異常是指程式在運作過程中發生的一種非正常狀況，例如錯誤、警告、致命錯誤
探索點選事件冒泡，掌握前端開發的關鍵原理
Jan 13, 2024 am 10:56 AM
學習點擊事件冒泡，掌握前端開發中的關鍵概念，需要具體程式碼範例前端開發是當今網路時代中的一個重要領域，而事件冒泡是前端開發中的關鍵概念之一。理解和掌握事件冒泡對於編寫高效的前端程式碼至關重要。本文將介紹什麼是事件冒泡，以及如何在前端開發中使用事件冒泡的概念。一、什麼是事件冒泡事件冒泡是指當一個元素上的事件被觸發時，會先從最內層的元素開始，然後逐級向父級元素
