js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
一、总结
一句话总结:他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。
1、事件冒泡是什么?
先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。
2、事件捕获是什么?
先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。
3、如何在事件冒泡和事件捕获中切换?
绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。
document.getElementById("parent").addEventListener("click",function(e){alert("parent事件被触发,"+e.target.id);},true)
4、如何实现鼠标放到li上对应的li背景变灰?
$("li").on("mouseover",function(){$(this).css("background-color","#ddd").siblings().css("background-color","white");})
$("ul").on("mouseover",function(e){$(e.target).css("background-color","#ddd").siblings().css("background-color","white");})
二、彻底弄懂JS的事件冒泡和事件捕获
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得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绑的事件……
高下立判!
转载于:https://www.cnblogs.com/Renyi-Fan/p/9263285.html
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获相关推荐
- 彻底弄懂JS的事件冒泡和事件捕获
原文地址为: 彻底弄懂JS的事件冒泡和事件捕获 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题 ...
- JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
- js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
- JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
- js模块化编程之彻底弄懂CommonJS和AMD/CMD!
为什么80%的码农都做不了架构师?>>> 先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前 ...
- js模块化编程之彻底弄懂CommonJS和AMD/CMD
转载地址:http://www.cnblogs.com/chenguangliang/p/5856701.html 先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想 ...
- JS中绑定事件顺序(事件冒泡与事件捕获区别)
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...
- 【金三银四】 一文弄懂 js 数据类型、堆栈内存、作用域(链)、闭包知识拓展 (一)
引言 对答如流系列篇,关于基本数据类型.堆栈内存.作用域作用域链.闭包 大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Gi ...
- html5设计app数据js库,12个流行的HTML5 JS图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
最新文章
- 经验 | 机器学习要避开十大雷区
- leetcode算法题--最小的k个数
- android sqlite SQLiteDatabase 操作大全 不看后悔!必收藏!看后精通SQLITE (第二部分)...
- 036_PageHeader页头
- SwipeRefreshLayout里面需要注意的Api
- 基础的shell编程问题(二)
- Jquery 每天记一点2009-7-2
- 在线直播网站源码开发,音视频同步的处理方案及选择
- 人工智能AI系列 - 视频图像搜索
- mac清理软件哪个好用?五大Mac Cleaner介绍推荐
- js中~~和 | 的使用
- 刚刚!霍金向北京喊话:人类需要大胆前行,涉足无前人所及之处
- 数据分析师成长路径-第一阶段
- java如何excel导入_java实现Excel导入(迭代一)
- allure 下载地址
- android开发多国语言对照表
- 文献综述-家装风格自动分类技术综述
- IDA7.7PJ版本
- 联合培养博士经历对于国内就业有优势吗?
- PPT批量修改所有字体