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压缩工具:X2JSCompactor
Jun 13 Javascript
js DOM的学习笔记
Dec 22 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
Vue 数据绑定的原理分析
Nov 16 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
我的论坛源代码(五)
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
简单了解python元组tuple相关原理
2019/12/02 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
行政总经理岗位职责
2013/12/05 职场文书
自考生自我评价分享
2014/01/18 职场文书
个人欠款担保书
2014/05/20 职场文书
思想品德评语大全
2014/12/31 职场文书
西湖英语导游词
2015/02/06 职场文书
食品卫生管理制度
2015/08/06 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Kubernetes控制节点的部署
2022/04/01 Servers