无为清净楼资源网

jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

 首先，大家都知道，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事件冒泡,jquery事件委托,jquery阻止冒泡,jquery允许冒泡
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接