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 动态添加表格行
Jun 22 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
使用javascript做在线算法编程
May 25 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
Vue实现点击当前行变色
Dec 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
销售行政专员职责
2014/01/03 职场文书
小学教师国培感言
2014/02/08 职场文书
人事部专员岗位职责
2014/03/04 职场文书
公司晚会策划方案
2014/05/17 职场文书
运动会演讲稿300字
2014/08/25 职场文书
借款协议书
2014/09/16 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
创业计划书之废品回收
2019/09/26 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js