up
down
Close
線上訪客: 7 本日人次: 1602 昨日人次: 1709 累積人次: 938486
 

JavaScript 事件捕獲與事件冒泡

│ 80 Views │ JavaScript

簡單說明

簡單來說,事件捕獲是從父層到子層依序向下查找事件,事件冒泡則是子層到父層依序向上被觸發。因此,如果某父層也有事件,那麼子層觸發後也會接著觸發該父層,直到跑完 document。如果不希望層層被觸發,就要在事件中加上阻止事件冒泡的機制。

事件捕獲

當冒泡事件發生後,事件捕獲會從 document > <html> > <body> > <div> 依據往下找事件來源,當找到事件後則觸發該事件,事件冒泡會往上依序觸發。

事件冒泡

事件冒泡後會往上依序冒泡,順序則是 <div> > <body> > <html> > document,如果層層元素中還有其他事件,則其他事件也會被觸發。如果不希望觸發父層,則需要阻止事件冒泡。

範例

<div id="grandfather">
 <div id="father">
  <div id="child">
  </div>
 </div>
</div>

script

為求簡便,以下用jQuery展示:


$(document).ready(function(){
    $('#grandfather').click(function(e){
        alert('grandfather');
    });
    $('#father').click(function(e){
        alert('father');                                                  
    });                                                                          
    $('#child').click(function(e){
        alert('child');
        e.stopPropagation(); // 阻止冒泡事件
    });
});  

在上述範例中,由於已加上阻止事件冒泡,因此點擊 #child時只會跳出 child 訊息。

如果將阻止冒泡事件註解起來,則點擊 .child 時,除了跳出 child 訊息外,還會接著跳 father 訊息,然後再跳出 grandfather 訊息。

總結

只要在事件中加上 e.stopPropagation(); 就可以阻止觸發祖輩層事件。事件觸發是從該事件開始往父層向上觸發,因此同輩與子孫輩不受影響。

本文是否對您有幫助?

延伸閱讀