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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
layui实现三级导航菜单
Jul 26 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
vue中路由跳转不计入history的操作
Sep 21 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/11/06 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python实现的批量下载RFC文档
2015/03/10 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
化学教学随笔感言
2014/02/19 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
教师教育心得体会
2016/01/19 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript