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 相关文章推荐
js中创建对象的几种方式示例介绍
Jan 26 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
Javascript的表单验证长度
Mar 16 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP加密解密实例分析
2015/12/25 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python登录系统界面实现详解
2019/06/25 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
转党组织关系介绍信
2014/01/08 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android