欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery關(guān)于事件冒泡和事件委托的技巧及阻止與允許事件冒泡的三種實現(xiàn)方法

 更新時間：2015年11月27日 10:09:12   作者：我的頭很光  
大家都知道，jQuery事件觸發(fā)時有2種機制，一種是事件委托，另一種是事件冒泡,冒泡或默認(rèn)的事件發(fā)生,在某些時候是不需要的,在此就需要一些可以阻止冒泡和默認(rèn)的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對你了解冒泡事件有所幫助

 首先，大家都知道，jQuery事件觸發(fā)時有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');
})

這段代碼的本意是，當(dāng)我點擊#btn的時候，我要alert出來“btn”字符串，而當(dāng)我點擊#box的時候，我要把#btn隱藏，但是，在實際執(zhí)行的時候，當(dāng)我點擊btn的時候，他是會先執(zhí)行btn的事件，繼而執(zhí)行box的事件，也就是先alert，再隱藏。與我們所想有所出入，那到底要怎么解決這個問題呢，這里就要想到事件冒泡這個機制，因為當(dāng)我點擊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()阻止了事件冒泡，因此，就不會觸發(fā)toggleClas事件;而此時我點擊#box的時候，就是正常的toggleClass事件被觸發(fā);

這里思考了一下，如果不用.on()該怎么解決，類似于原生js中，用addEventListener監(jiān)聽點擊的target，代碼也不復(fù)雜：

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

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

當(dāng)然，事件冒泡也并非都是副作用，就是我們要講的另一種，那就是事件委托，事件委托就是建立在事件冒泡的基礎(chǔ)上的，比如上面那個例子，你可以假設(shè)#btn和#box之間有很多元素，當(dāng)我想要點擊最里層的#btn的時候，想要觸發(fā)他對應(yīng)的事件，那么，就可以通過點擊它的外圍元素，然后判斷點擊的是否是目標(biāo)元素，也就是btn，如果是，那么觸發(fā)btn的事件，其實就是上面.on()的這個例子，可以改寫成：

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

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

最后再仔細(xì)的分析一下，其實事件委托和事件冒泡，從邏輯上來思考無非就是2個相反的方向在執(zhí)行。事件委托其實就是事件捕獲過程，可以看成是從外到內(nèi)捕獲的過程；而事件冒泡就是從里到外冒泡的過程。

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

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

有時我們不希望冒泡或默認(rèn)的事件發(fā)生，這樣就需要一些jquery的的方法阻止冒泡和默認(rèn)的事件了。
可以通過以下三種方法做到不同程度的阻止。

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

return false 在事件的處理中，可以阻止默認(rèn)事件和冒泡事件。

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

event.preventDefault()在事件的處理中，可以阻止默認(rèn)事件但是允許冒泡事件的發(fā)生。

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

event.stopPropagation()在事件的處理中，可以阻止冒泡但是允許默認(rèn)事件的發(fā)生。

相關(guān)文章

最新評論