JavaScript捕获和冒泡探讨
<div id="div">
<input type="button" value="banana" id="banana" />
</div>
在此页面中我们添加如下的代码:
var btn = document.getElementById('banana');
var div = document.getElementById('div'); btn.addEventListener('click', function () {
console.log('capture', 'btn');
}, true);
btn.addEventListener('click', function () {
console.log('bubble', 'btn');
}, false); div.addEventListener('click', function () {
console.log('capture', 'div');
}, true);
div.addEventListener('click', function () {
console.log('bubble', 'div');
}, false);
给button和div我们都是先绑定的捕获事件,此时运行的结果如下:
capture div
capture btn
bubble btn
bubble div
可以看出是先运行的 捕获div - > 捕获 btn - > 冒泡 btn -> 冒泡 div.
我们改改事件绑定的先后顺序,代码如下:
var btn = document.getElementById('banana');
var div = document.getElementById('div'); btn.addEventListener('click', function () {
console.log('bubble', 'btn');
}, false);
btn.addEventListener('click', function () {
console.log('capture', 'btn');
}, true); div.addEventListener('click', function () {
console.log('bubble', 'div');
}, false);
div.addEventListener('click', function () {
console.log('capture', 'div');
}, true);
再看运行的结果:
capture div
bubble btn
capture btn
bubble div
此时结果是 捕获 div -> 冒泡 btn -> 捕获 btn -> 冒泡 div .
猜测结论: 在最后一个捕获元素中,冒泡和捕获的事件执行的先后顺序与事件绑定的先后顺序有关,谁先绑定就优先执行谁。
我们再改改页面代码:
<div id="div">
<div id="div1">
<input type="button" value="banana" id="banana" />
</div>
</div>
改改绑定事件的代码:
var btn = document.getElementById('banana');
var div = document.getElementById('div');
var div1 = document.getElementById('div1'); btn.addEventListener('click', function () {
console.log('bubble', 'btn');
}, false);
btn.addEventListener('click', function () {
console.log('capture', 'btn');
}, true); div.addEventListener('click', function () {
console.log('bubble', 'div');
}, false);
div.addEventListener('click', function () {
console.log('capture', 'div');
}, true); div1.addEventListener('click', function () {
console.log('bubble', 'div1');
}, false);
div1.addEventListener('click', function () {
console.log('capture', 'div1');
}, true);
点击button执行的结果:
capture div
capture div1
bubble btn
capture btn
bubble div1
bubble div
此时结果是 : 捕获 div - > 捕获div1 - > 冒泡 btn -> 捕获 btn -> 冒泡 ->div1 -> 冒泡 div.
其它的元素都是按照先捕获后冒泡的顺序在执行,只有最后一个捕获元素中,冒泡和捕获的事件执行的先后顺序与事件绑定的先后顺序有关,谁先绑定就优先执行谁。
JavaScript捕获和冒泡探讨的更多相关文章
- JavaScript捕获与冒泡与委托
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 相反的,事件冒泡是自下而上的去触发事件. 并不是所有的事件都能冒泡,以下事件不冒泡:blur.focus.load.un ...
- JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
JavaScript中捕获/阻止捕获.冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
- JavaScript(3)---事件冒泡、事件捕获
JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- javaScript的事件冒泡事件捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- 浅析JavaScript事件流——冒泡
一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...
- dom事件不求甚解,色解事件捕获和冒泡
以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...
随机推荐
- Lua中用table统一管理需要获取的unity物体
unity上的组件,可以用table统一管理 然后在初始化时候统一给table赋值,这样需要用到时候直接调用table中对应的key便可拿到对应的物体,省下了在脚本开头一堆声明的脚本,这样就不用声明这 ...
- 磁盘分区知识与linux系统分区实践
一.磁盘存储逻辑结构图 回忆: (1)什么是分区? 磁盘分区就相当于给磁盘打隔断. (2)磁盘在linux里的命名 IDE /dev/hda hdb SCSI sda sdb 分区 ...
- 【AI】【人工智能】【计算机】人工智能工程技术人员等职业信息公示
人社厅发[2019]48号 各省.自治区.直辖市及新疆生产建设兵团人力资源社会保障厅(局).市场监管局.统计局,国务院各部门.各直属机构.各中央企业.有关社会组织人事劳动保障工作机构,中央军委政治工作 ...
- MySQL主从同步报错1507
mysql 从库上手动删除partiton后,主库未做修改.后期主库上删除partiton后,出现问题. 故障现场 Last_Errno: 1507 Last_Error: Error 'Error ...
- Vue(一)环境搭建、创建项目
1.安装node和npm 因为node已经有npm,所以直接安装node,配置环境变量 官网地址:http://nodejs.cn/download/ 2.查看node是否安装成功,输入名nde -v ...
- 关于SpringMVC中的转发与重定向的说明
写的非常详细,参看该地址:https://www.zifangsky.cn/661.html 总结: 1.请求转发:url地址不变,可带参数,如?username=forward 2.请求重定向:ur ...
- dede添加自定义变量不显示
dedecms前端无法调用自定义变量要怎么解决,登录他的网站后台看了一下,自定义变量已经添加了,也写入了数据库表中,但是就是前台没办法调用出来,后面想想可能是文件权限不够,具体是哪个文件呢?查了相关文 ...
- easyui datagrid 合并相同行
$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...
- 牛客 197C 期望操作数
大意: 给定$x,q$, 每步操作$x$等概率变为$[x,q]$中任意一个数, 求变为$q$的期望操作数. 很容易可以得到$f(x,q)=\frac{\sum\limits_{i=x+1}^qf(i, ...
- luogu P4762 [CERC2014]Virus synthesis (回文自动机)
大意: 初始有一个空串, 操作(1)在开头或末尾添加一个字符. 操作(2)在开头或末尾添加该串的逆串. 求得到串$S$所需最少操作数. 显然最后一定是由某个偶回文通过添加字符得到的, 那么只需要求出所 ...