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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
理解jQuery stop()方法
Nov 21 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JS实现简单的表格增删
Jan 16 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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脚本的10个技巧(5)
2006/10/09 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python类的基础入门知识
2008/11/24 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
django中的数据库迁移的实现
2020/03/16 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
写好自荐信的几个要点
2013/12/26 职场文书
生态养殖创业计划书
2014/05/06 职场文书
学子宴致辞大全
2015/07/27 职场文书
办公室管理规章制度
2015/08/04 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫