解析:浏览器事件冒泡及事件捕获
今天的效率有点奇葩,说高吧,一个上午做了不少事。说低吧,因为一个分布式的算法花了我不少时间,终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。
而今天,还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念:什么是事件冒泡?什么是事件捕获?
简单地说,事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点,向父节点传递,直到到达最顶节点。而事件捕获则是从最顶节点,逐步向下传递,直到到达事件触发的源节点。
在一些标准的浏览器中,如Chrome、Firefox等,支持这两种冒泡方式。而事实上,准确的说,是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合:先从顶级节点开始,将事件向下传递至源节点,再从源节点冒泡至顶节点。
而在IE及Opera(以下说的都是老版本的欧朋,新版本的欧朋经检测是支持事件捕获的)下,是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。
IE、Opera的事件绑定函数是attachEvent,而Chrome等浏览器则是addEventListener,而后者比前者的参数多了一个——这个参数是一个布尔值,这个布尔值由用户决定,用户若设为true,则该绑定事件以事件捕获的形式参与,若为false则以事件冒泡的形势参与。而这个参数在IE和Opera浏览器中是不存在的——根本原因是它们不支持事件捕获。
下面我来提供一个例子让大家更好地理解事件冒泡和事件捕获(本来想用flex布局,后来想偷懒,所以还是算了,大家不要注意细节(*^__^*) 嘻嘻……):
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div {margin: 0 auto;}#ele1 {width: 500px;height: 500px;background: green;line-height: 500px;text-align: center;}#ele2 {width: 300px;height: 300px;line-height: 300px;background: blue;text-align: center;display: inline-block;vertical-align: middle;}#ele3 {width: 200px;height: 200px;background: red;display: inline-block;vertical-align: middle;}</style>
</head>
<body><div id="ele1"><div id="ele2"><div id="ele3"></div></div></div><a id="test" href="http://baidu.com/">click</a><script type="text/javascript">window.onload = function() {var e1 = document.getElementById('ele1');var e2 = document.getElementById('ele2');var e3 = document.getElementById('ele3');var link = document.getElementById('test');e1.addEventListener('click',function(evt) {console.log('ele1-click');},true);e2.addEventListener('click',function(evt) {console.log('ele2-click');});e3.addEventListener('click',function(evt) {console.log('ele3-click');evt.stopPropagation();});link.addEventListener('click',function(evt) {console.log('^_^,I have stopped it!')evt.preventDefault();});};</script>
</body>
</html>
可以留意到,我在例子中还增加了一个preventDefault的例子,因为我看到网上许多文章都把它和stopPropagation放在一起讨论,所以这里也让大家了解一下。
解析:浏览器事件冒泡及事件捕获相关推荐
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
- addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
- JS高级:事件冒泡和事件捕获;
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
- “约见”面试官系列之常见面试题第三十四篇之事件冒泡、事件捕获、事件代理(建议收藏)
对于事件的传播机制,Netscape Communicator采用的是事件捕获(event capture),IE9.Safari.Chrome.Opera和Firefox采用的是事件冒泡(event ...
- 事件冒泡 vs 事件捕获 vs 事件委托 的区别
事件冒泡 vs 事件捕获 vs 事件委托 本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
- 彻底弄懂JS的事件冒泡和事件捕获
原文地址为: 彻底弄懂JS的事件冒泡和事件捕获 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题 ...
- 简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序 这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
- 事件委托、事件冒泡与事件捕获
目录 事件委托: 1.原理 2.实现 ①在介绍事件委托的方法之前,我们先来看一段一般方法的例子: ②那么我们用事件委托的方式做又会怎么样呢? ③要是每个li被点击的效果都不一样,那么用事件委托还有用吗 ...
- JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇 先来看一段实例: js: var $input = document. ...
最新文章
- [Mysql]过大sql文件导入过慢问题解决
- python import from class_Python: import vs from (module) import function(class) 的理解
- 【Linux系统编程】进程的控制:结束进程、等待进程结束
- 【SpringCloud】第五篇: 路由网关(zuul)
- java大数输出一位小数_java大数练习 大明A+B(大数小数的高精度)
- 一文搞懂浏览器同源策略
- linux装Oracle需要jdk,告诉你Ubuntu Linux下安装Oracle JDK的方法及命令
- 【树莓派】Linux指令使用记录
- python编译出来的程序员_Windows下编译Python2.7源码
- 补码乘法实验原理_你真的理解补码吗?
- Python基础——numpy.ndarray一维数组与多维数组
- Reactor模型讲解
- GPS模块编程之NMEA0183协议
- oracle11g64位怎么用sql,Oracle11g64位下使用PLSQL
- 分享一款开源数据库建模工具--PDMan(可代替powerdesigner)
- 程序员跳槽频繁不稳定被质疑,一番话后HR哑口无言!
- 解决Mysql:Incorrect string value: '\xF0\x9F\x8D\x83\xF0\x9F...' for column
- 微软再推 Rust 语言免费中文教程,更香了!
- 最新目标跟踪评估指标汇总
- 复利计算--结对1.0,做汉堡,结对2.0-复利计算再升级
热门文章
- 亮点前瞻 | 首届 ServerlesssDays · China 大会议程发布
- 使用Matlab将多个图形Figure文件合并
- VS找到w3wp.exe 附加到23wp.exe进行debug程序调试
- 设计电商平台优惠券系统
- 软件工程实训有必要吗_软件工程实训总结
- 魔方机器人之搭建Python编程环境
- windows安装exe为系统服务
- python文本关联分析_如何对文本内的某个词的关联词进行提取?
- 笔记:全网最详细jQuery教程
- Excel答粉丝问:折线图如何添加参考线?​