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 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
javascript的this关键字详解
May 20 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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缓存类代码(附详细说明)
2011/06/09 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
浅析php创建者模式
2014/11/25 PHP
jquery()函数的三种语法介绍
2013/10/09 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
nodejs基础知识
2017/02/03 NodeJs
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
汇科协同Java笔试题
2012/03/31 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
法人授权委托书格式
2014/04/08 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
团干部培训班心得体会
2016/01/06 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android