jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法


Posted in Javascript onNovember 27, 2015

 首先,大家都知道,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()在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
js实现多图左右切换功能
Aug 04 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 #Javascript
基于jquery animate操作css样式属性小结
Nov 27 #Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 #Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 #Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 #Javascript
谈谈jQuery Ajax用法详解
Nov 27 #Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 #Javascript
You might like
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
几个Shell Script面试题
2014/04/18 面试题
法律专业实习鉴定
2013/12/22 职场文书
活动策划求职信模板
2014/04/21 职场文书
质量管理标语
2014/06/12 职场文书
新文化运动的基本口号
2014/06/21 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
会议通知
2015/04/15 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL