一篇文章让你彻底弄懂JS的事件冒泡和事件捕获


Posted in Javascript onAugust 14, 2017

在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场)。工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗)。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。

先上结论:他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

这是HTML结构

<div id="parent">
  <div id="child" class="child"></div>
  </div>

现在我们给它们绑定上事件

document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+this.id)
  })

结果:

child事件被触发,child
parent事件被触发,parent

结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。

现在改变第三个参数的值为true

document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+e.target.id)
  },true)

结果:

parent事件被触发,parent
child事件被触发,child

结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。

貌似没什么卵用,上一个利用事件冒泡的案例,反正我是经常会用到。

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

需求是这样的:鼠标放到li上对应的li背景变灰。

利用事件冒泡实现:

$("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

也许有人会说,我们直接给所有li都绑上事件也可以啊,一点也不麻烦,只要……

 $("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

是,这样也行。而且从代码简洁程度上,两者是相若仿佛的。但是,前者少了一个遍历所有li节点的操作,所以在性能上肯定是更优的。
还有就是,如果我们在绑定事件完成后,页面又动态的加载了一些元素……

$("<li>item7</li>").appendTo("ul");
这时候,第二种方案,由于绑定事件的时候item7还不存在,所以为了效果,我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件……
高下立判!

以上就是小编为大家整理的js事件冒泡事件捕获的详细介绍的内容啦。希望大家继续支持三水点靠木~

Javascript 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
javascript连续赋值问题
Jul 08 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 #Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 #Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 #Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 #Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
js异步编程小技巧详解
Aug 14 #Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 #Javascript
You might like
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python面向对象之Web静态服务器
2019/09/03 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
求职信模板标准格式范文
2014/02/23 职场文书
《颐和园》教学反思
2014/02/26 职场文书
保护动物倡议书
2014/04/15 职场文书
2014最新实习证明模板
2014/10/02 职场文书
行风评议整改报告
2014/11/06 职场文书
支行行长竞聘报告
2014/11/06 职场文书
公司聚餐通知
2015/04/22 职场文书
罗马假日观后感
2015/06/08 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript