首先，大家都知道，jQuery事件觸發時有2種機制，一種是事件委托，另一種是事件冒泡（IE情況暫時不考慮）。拿click事件做例子，先附上一段代碼：
html：
<body>
<div id="box">
<p id="btn">我是按鈕</p>
</div>
</body>
style:
.hid{
display:none;
}
scr $(‘#btn’).toggleClass(‘hid’);
})
$('#btn').click(function(){
alert('btn');
})
這段代碼的本意是，當我點擊#btn的時候，我要alert出來“btn”字符串，而當我點擊#box的時候，我要把#btn隱藏，但是，在實際執行的時候，當我點擊btn的時候，他是會先執行btn的事件，繼而執行box的事件，也就是先alert，再隱藏。與我們所想有所出入，那到底要怎么解決這個問題呢，這里就要想到事件冒泡這個機制，因為當我點擊btn的時候，事件會向上冒泡到父元素，直至document對象。
1.7（沒記錯的話）之后的jQuery版本，提供了.on()事件，用來處理綁定元素的事件，這里我們可以用.on()事件，以及stop e.stopPropagation()；
alert(‘btn’);
})
$('#box').click(function(){
$(‘#btn’).toggleClass(‘hid’);
})
這里我先用on綁定了#btn的事件，使得在點擊到btn按鈕的時候，alert('btn'),但是因為我 e.stopPropagation()阻止了事件冒泡，因此，就不會觸發toggleClas事件;而此時我點擊#box的時候，就是正常的toggleClass事件被觸發;
這里補充一點：.on()方法事件只會針對事件觸發前就已經存在的元素上，如果是在on事件之后新增的元素，是沒辦法綁定到事件的，那么這個時候，通過事件委托也是可以解決這個問題的，將事件委托綁定到包含的元素上。
這里思考了一下，如果不用.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個相反的方向在執行。事件委托其實就是事件捕獲過程，可以看成是從外到內捕獲的過程；而事件冒泡就是從里到外冒泡的過程。
新聞熱點
疑難解答
