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 CSS画图之基础篇
Jul 29 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
javascript下string.format函数补充
Aug 24 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
js实现查询商品案例
Jul 22 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
vue中动态添加class类名的方法
2018/09/05 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
python动态监控日志内容的示例
2014/02/16 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
房产销售经理职责
2013/12/20 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
python基础之停用词过滤详解
2021/04/21 Python
go语言-在mac下brew升级golang
2021/04/25 Golang