JS趴趴往上走-DOM傳遞機制

-

Event Bubbling & Event Capturing

要了解捕獲與冒泡機制之前首先我們要知道事件是怎麼處理的

大家還記得DOM是一層一層下來的

 <html>
  <head>
    <title>網頁標題</title>
  </head>

  <body>
    <h1>Header</h1>
    <a href="#">快速連結</a>
  </body>

 </html>

對應的的圖片:




而他們重疊的樣子就是






所以當你點擊目標(target)時，在這邊我們假設點擊了<a>連結，其實除了<a>被點擊之外，包含它的<body>其實也被點擊了哦,<html>、document也被點擊了,會一層一層往上找
所以我們可以知道點擊了一個<a>，有包覆它的元素也會跟著被點擊，可以說是整個網頁都被點擊了!


那麼除了目標之外，有包覆著他的都會被點擊，那它們是誰先傳遞續訊息呢?

DOM在傳遞訊息順序有兩種方法:

事件冒泡 Event Bubbling
事件捕獲 Event Capturing


Event Bubbling

事件冒泡是指，當您點擊目標元素後，會一層一層往上傳遞，直到最上面的根結點，就是我們的document

以下面範例來說:

 <html>
  <head>
    <title>網頁標題</title>
  </head>

  <body>
   <ul>
     <li></li>
     <li></li>
     <li><a href="#"></a></li>
    </ul>
  </body>

 </html>

當我們點擊<a>，而冒泡機制就會是

<a> → <li> → <ul> → <body> → <html> → <document>
逐漸往上觸發


Event Capturing

事件捕獲就和事件冒泡相反，是從上往下觸發
所以以上範例來講，點擊目標<a>它會是

<document> → <html> → <body> → <ul> → <li> → <a>

觸發優先順序

事件捕獲和事件冒泡兩個機制對於事件都會執行，沒有特別依賴哪種，但當兩種機制若是一起觸發的話事件會

 先捕獲，再冒泡

我們看之前addEventListener()範例(建議點進去看console.log())
See the Pen
addEventListener(捕獲、冒泡) by yanennn (@yennnnn)
on CodePen.


當兩種事件都被觸發時，外層捕獲會優先執行，再到內層，這邊提醒:內層對於點擊的目標是沒有分順序的!誰程式碼優先，就先執行，之後再換外層冒泡執行


終止捕獲、冒泡

現在我們知道點擊內部，外面也會被觸發，那怎麼阻止這種事發生，就可以使用Event.stopPropagation()


Event.stopPropagation():可以阻止當前事件繼續進行捕獲及冒泡階段的傳遞


以下範例來看(建議點進去看console.log())
當你的Event.stopPropagation()放在哪邊，事件的傳遞就斷在哪裡，不會繼續往下傳遞
See the Pen
Event.stopPropagation() by yanennn (@yennnnn)
on CodePen.




假如:console.log("我是外面捕獲!!!")放置Event.stopPropagation()，當點擊我在裡面的div，你會發現console.log()只會顯示"我是外面捕獲!!!"

因為當點擊目標時，你上面的也會跟著點擊，以先捕獲再冒泡，所以會先顯示"我是外面捕獲!!!"，接著"我是外面捕獲!!!"有放置Event.stopPropagation()，所以傳遞斷掉了，故只顯示"我是外面捕獲!!!"

所以說，若你是把Event.stopPropagation()放在console.log('我是裡面冒泡!!!');或者 console.log('我是裡面捕獲!!!');就會依序得到"我是外面捕獲!!!"、"我是裡面冒泡!!!"、"我是裡面捕獲!!!"，而"我是外面冒泡!!!"因為被中斷了所以不會顯示


Event.stopPropagation()(建議點進去看console.log())只能中斷你想中斷的那個節點而已，若是你想要讓其他同一層級的也不要被執行，可以改用e.stopImmediatePropagation();
See the Pen
Event.stopImmediatePropagation(); by yanennn (@yennnnn)
on CodePen.


這邊提醒，同一層級是按照程式碼優先依序執行的，若你Event.stopImmediatePropagation();寫在同層級的最後一個，前面一樣還是會被執行哦



資料來源:
https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/
https://ithelp.ithome.com.tw/articles/10191970?sc=iThelpR

留言

張貼留言

這個網誌中的熱門文章

JS趴趴往上走-插入HTML標籤的兩種方式

-
innerHTML innerHTML可以設定HTML中的元素，也可以單純的字串寫入HTML中的某一部分,傳進語法進行渲染，是用來設計與網友互動的網頁特效方法 請先新增HTML再新增Javascript看效果哦! 範例:跟改文字 //html <p class="text"></p> //Javascript //定義p var pt=document.querySelector('.text'); //更換文字 pt.innerHTML="我變更了!"; 範例:內部新增元素 //html <ul class="text"></ul> //Javascript //定義ul var ult=document.querySelector('.text'); //新增元素 ult.innerHTML="<li>我是清單</li>"; 優點:效能快 缺點:資安風險，要確保來源沒問題 差異:是一次性渲染，會把前面資料給覆蓋過去 Document.createElement() 創建一個新元素,以DOM節點來處理 語法: var element = document.createElement(創建元素); 範例: //html <ul class="text"></ul> //Javascript //創建li元素 var str=document.createElement('li'); //新增文字 str.textContent="新增清單!"; //在.text下新增子節點(str) document.querySelector('.text').appendChild(str); 優點:安全性高 缺點:效能差 差異:產生的結果會繼續接在原本有的元素後面，不像 innerHTML 會重新覆蓋
閱讀完整內容

JS趴趴往上走-switch篇

-
switch 上一回我們講到 if..else ，這節來說說 switch switch 也是條件判斷，不同條件執行不同動作 switch(條件內容){ case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; default: ..執行內容..; break; } 用範例來說我們可以(判斷日期) var week="Wednesday"; switch(week){ case "Monday": console.log("今天星期一"); break; case "Tuesday": console.log("今天星期二"); break; case "Wednesday": console.log("今天星期三"); break; case "Thursday": console.log("今天星期四"); break; case "Friday": console.log("今天星期五"); break; case "Saturday": case "Sunday": console.log("放假日!"); break; default: console.log("錯誤"); break; ...
閱讀完整內容

JS趴趴往上走-if篇

-
if...else if...else 是條件判斷式，用來判別你所需要的內容，如同語法所說，假如怎樣怎樣...否則怎樣怎樣 if(條件內容){ ..執行內容.. }else(條件內容){ ..執行內容.. } 條件內容是回傳 boolean 值 true 和 flase ，當第一條件為 true ，就會執行 { } 的內容，若為 false 則執行下一步 而當你需要判斷的數量多時，可以使用 else if 來增加條件判斷 if(分數>0並且 =60並且 =80 除了 if...else ，我們也可以使用 if...retrun 回傳錯誤 所以有 retrun ，就不需要 else if(分數 但是使用 if..else 方式若你條件判斷很多的話，會導致效能不好，每跑一次就會重新執行，所以這時 switch 就會是你的好選擇! 資料來源: https://blog.wu-boy.com/2013/01/you-must-be-known-js-condition/ https://www.ithome.com.tw/voice/108380
閱讀完整內容