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的对话框详解与参数
Mar 08 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
详解python运行三种方式
2019/05/13 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
机械设计及其自动化求职推荐信
2014/02/17 职场文书
高级工程师英文求职信
2014/03/19 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python预测分词的实现
2021/06/18 Python