jquery關於事件冒泡和事件委託的技巧及阻止與允許事件冒泡的三種實現方法

jquery關於事件冒泡和事件委託的技巧及阻止與允許事件冒泡的三種實現方法_jquery

WBOY

發布： 2016-05-16 15:29:20

原創

1591 人瀏覽過

首先，大家都知道，jQuery事件觸發時有2種機制，一種是事件委託，另一種是事件冒泡（IE情況暫時不考慮）。拿click事件做例子，先附上一段程式碼：

html：

<body>
<div id="box">
<p id="btn">我是按钮</p>
</div>
</body>
style:
.hid{
　display:none;
}

登入後複製

script：

$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})
$('#btn').click(function(){
 alert('btn');
})

登入後複製

這段程式碼的本意是，當我點擊#btn的時候，我要alert出來「btn」字串，而當我點擊#box的時候，我要把#btn隱藏，但是，在實際執行的時候，當我點擊btn的時候，他是會先執行btn的事件，繼而執行box的事件，也就是先alert，再隱藏。與我們所想有所出入，那到底要怎麼解決這個問題呢，這裡就要想到事件冒泡這個機制，因為當我點擊btn的時候，事件會向上冒泡到父元素，直至document對象。

1.7（沒記錯的話）之後的jQuery版本，提供了.on()事件，用來處理綁定元素的事件，這裡我們可以用.on()事件，以及stopPropagation()方法來阻止事件冒泡：

$('#box').on('click','#btn',function(e){
 e.stopPropagation()；
 alert(‘btn');
})
$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})

登入後複製

這裡我先用on綁定了#btn的事件，使得在點擊到btn按鈕的時候，alert('btn'),但是因為我e.stopPropagation()阻止了事件冒泡，因此，就不會觸發toggleClas事件;而此時我點擊#box的時候，就是正常的toggleClass事件被觸發;

這裡思考了一下，如果不用.on()該怎麼解決，類似原生js中，用addEventListener監聽點擊的target，程式碼也不複雜：

$('#box‘).click(function(e) {
 if (e.target == this) {
  $(‘#btn').toggleClass(‘hid');
 }
})
$(‘#btn').click(function() {
 alert(‘btn');
})

登入後複製

這樣子，就能達到阻止事件冒泡的樣子了。

當然，事件冒泡也並非都是副作用，就是我們要講的另一種，那就是事件委託，事件委託就是建立在事件冒泡的基礎上的，比如上面那個例子，你可以假設# btn和#box之間有很多元素，當我想要點擊最裡層的#btn的時候，想要觸發他對應的事件，那麼，就可以透過點擊它的外圍元素，然後判斷點擊的是否是目標元素，也就是btn，如果是，那麼觸發btn的事件，其實就是上面.on()的這個例子，可以改寫成：

$('body').on('click','#btn',function(e){
 alert(‘btn');
})

登入後複製

把btn的事件委託給點擊body來處理。

最後再仔細的分析一下，其實事件委託和事件冒泡，從邏輯上來思考無非就是2個相反的方向在執行。事件委託其實就是事件捕獲過程，可以看成是從外到內捕獲的過程；而事件冒泡就是從裡到外冒泡的過程。

jquery的冒泡事件的阻止與允許(三種實現方法)

冒泡或預設的事件發生,在某些時候是不需要的,在此就需要一些可以阻止冒泡和默認的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對你了解冒泡事件有幫助

有時我們不希望冒泡或預設的事件發生，這樣就需要一些jquery的的方法來阻止冒泡和預設的事件了。
可以透過以下三種方法做到不同程度的阻止。

A：return false --->In event handler ,prevents default behavior and event bubbing 。

return false 在事件的處理中，可以阻止預設事件和冒泡事件。

B：event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。

event.preventDefault()在事件的處理中，可以阻止預設事件但是允許冒泡事件的發生。

C：event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).。

event.stopPropagation()在事件的處理中，可以阻止冒泡但是允許預設事件的發生。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

jquery關於事件冒泡和事件委託的技巧及阻止與允許事件冒泡的三種實現方法_jquery