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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:29 PM

首先，大家都知道，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()在事件的處理中，可以阻止冒泡但是允許預設事件的發生。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱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)

熱門話題

gmail信箱登陸入口在哪裡

7667

CakePHP 教程

1393

C# 教程

1205

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。