关于js事件冒泡和事件捕获
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。
<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%">
</div>
</div>
<script>
document.getElementById('parent').addEventListener('click',(e) =>{
alert('parent');
}) document.getElementById('child').addEventListener('click',(e) =>{
alert('child');
})
</script>
结果先输出child,再输出parent,事件的触发顺序自内向外,这是事件冒泡。
<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%"></div></div>
<script> document.getElementById('parent').addEventListener('click',(e) =>{ alert('parent'); },true) document.getElementById('child').addEventListener('click',(e) =>{ alert('child'); },true)
</script>
结果先输出parent,再输出child,事件触发顺序变更为自外向内,这是事件捕获。
还有一种写法使用setTimeOut实现捕获
<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%"></div></div> <script>
document.getElementById('parent').addEventListener('click',(e) =>{
alert('parent');
}) document.getElementById('child').addEventListener('click',(e) =>{
setTimeout(() => {
alert('child');
});
})
</script>
关于setTimeout和setInterval的深入理解 https://www.cnblogs.com/xiaohuochai/p/5773183.html
关于js事件冒泡和事件捕获的更多相关文章
- JS事件(事件冒泡和事件捕获)
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- JS事件冒泡与事件捕获怎么理解?
在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- js 事件冒泡和事件捕获
事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...
- 彻底弄懂JS的事件冒泡和事件捕获
先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; ...
- js高级:event,事件冒泡,事件捕获
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...
- JS高级:事件冒泡和事件捕获;
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
- 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)
由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...
- JS事件冒泡和事件捕获的详解
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...
随机推荐
- RobotFramework模拟手机浏览器
转自 http://blog.csdn.net/max229max/article/details/70808867 感谢max bai提供的思路 Python - Selenium Chrome 模 ...
- PHP小函数集-篇一
一. 验证 /** * 判断用户名是否规范 */ function is_username($username) { if (preg_match("/^[a-zA-Z]{1}([0-9a- ...
- Postgresql空库发布或者部分空库,模式,表处理备份流程
--备份数据库结构pg_dump -h localhost -p 8101 -d qhsoam -s -f /tmp/nodata.sql --仅备份某模式和该模式下的数据表结构pg_dump -h ...
- POJ3233:Matrix Power Series(矩阵快速幂+递推式)
传送门 题意 给出n,m,k,求 \[\sum_{i=1}^kA^i\] A是矩阵 分析 我们首先会想到等比公式,然后得到这样一个式子: \[\frac{A^{k+1}-E}{A-E}\] 发现要用矩 ...
- 洛谷 P1081 开车旅行【双向链表+倍增】
倍增数组的20和N写反了反复WAWAWA-- 注意到a和b在每个点上出发都会到一个指定的点,所以这样构成了两棵以n点为根的树 假设我们建出了这两棵树,对于第一问就可以枚举起点然后倍增的找出ab路径长度 ...
- 【插件开发】—— 11 窃听风云(Java事件监听原理-GEF实例讲解)
前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...
- echarts 实例demo 详细讲解
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- elasticsearch全文搜索
1.创建索引 PUT 192.168.100.102:9200/news 2.创建mapping POST 192.168.100.102:9200/news/new/_mapping { " ...
- 题解报告:hdu 1229 还是A+B
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1229 Problem Description 读入两个小于10000的正整数A和B,计算A+B.需要注 ...
- jQuery 常见面试题
一 :Q: What is the difference between .get(), [], and .eq()? A: eq返回原生jQuery对象,截取某些el元素生成Jquery新对象 ge ...