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 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python实现简易动态时钟
2018/11/19 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
乡镇纠风工作实施方案
2014/03/22 职场文书
机关办公室岗位职责
2014/04/16 职场文书
高中教师考核方案
2014/05/18 职场文书
教师考核鉴定意见
2015/06/05 职场文书
法院执行局工作总结
2015/08/11 职场文书
养成教育工作总结
2015/08/13 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
Apache POI的基本使用详解
2021/11/07 Servers