整理了一些jQuery关于事件冒泡和事件委托的技巧_H5之家

正文

首先，大家都知道，jQuery事件触发时有2种机制，一种是事件委托，另一种是事件冒泡（IE情况暂时不考虑）。拿click事件做例子，先附上一段代码：

html：

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()方法事件只会针对事件触发前就已经存在的元素上，如果是在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个相反的方向在执行。事件委托其实就是事件捕获过程，可以看成是从外到内捕获的过程；而事件冒泡就是从里到外冒泡的过程。