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 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
微信小程序云开发之使用云函数
May 17 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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
一个简洁的多级别论坛
2006/10/09 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python迭代器常见用法实例分析
2019/11/22 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
大学生求职自我评价
2014/01/16 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python