jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
首先，大家都知道，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()在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
相关文章
这篇文章主要介绍了jQuery实现字符串全部替换的方法,结合实例形式对比分析了使用Replace进行替换的方法及使用正则进行全部替换的相关操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jQuery选择器之属性筛选选择器用法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要以实例解析了jQuery插件EasyUI最常用的验证规则，对EasyUI校验感兴趣的小伙伴们可以参考一下2015-11-11
在jQuery里面对于一些HTML的元素操作都是很简化的，这也是很多人选择使用jQuery的原因。2009-11-11
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionWidgets实现的AngularGauge图效果,结合具体实例形式分析了jQuery使用FusionWidgets插件载入xml数据实现AngularGauge图的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jquery图片切换的方法,实例分析了jQuery实现页面元素与相应样式切换效果的使用相关技巧,设计jQuery中hide、fadeIn、css、setInterval等方法的使用,需要的朋友可以参考下2015-04-04
jquery win 7透明弹出层效果，点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度，很不错的一个弹出层插件。2013-08-08
这篇文章主要介绍了JQuery样式与属性设置方法,结合实例形式分析了jQuery属性的获取与设置、以及样式的添加与删除相关操作技巧,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了jQuery操作Dom元素、jQuery遍历、JavaScript遍历，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
最新评论