一篇文章让你彻底弄懂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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
微信小程序实现多图上传
Jun 19 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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
Python实现栈的方法
2015/05/26 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python调用C语言的实现
2019/07/26 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python regex库实例用法总结
2021/01/03 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Weblogc domain问题
2014/01/27 面试题
c/c++某大公司的两道笔试题
2014/02/02 面试题
会计专业自荐信范文
2013/12/02 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
公务员个人考察材料
2014/12/23 职场文书
新入职员工工作总结
2015/10/15 职场文书