<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捕获和冒泡探讨的更多相关文章

  1. JavaScript捕获与冒泡与委托

    事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 相反的,事件冒泡是自下而上的去触发事件. 并不是所有的事件都能冒泡,以下事件不冒泡:blur.focus.load.un ...

  2. JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

    JavaScript中捕获/阻止捕获.冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...

  3. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  4. javascript事件捕获与冒泡

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...

  5. JavaScript(3)---事件冒泡、事件捕获

    JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div ...

  6. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

  7. javaScript的事件冒泡事件捕获

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  8. 浅析JavaScript事件流——冒泡

    一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...

  9. dom事件不求甚解,色解事件捕获和冒泡

    以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...

随机推荐

  1. Lua中用table统一管理需要获取的unity物体

    unity上的组件,可以用table统一管理 然后在初始化时候统一给table赋值,这样需要用到时候直接调用table中对应的key便可拿到对应的物体,省下了在脚本开头一堆声明的脚本,这样就不用声明这 ...

  2. 磁盘分区知识与linux系统分区实践

    一.磁盘存储逻辑结构图 回忆: (1)什么是分区? 磁盘分区就相当于给磁盘打隔断. (2)磁盘在linux里的命名 IDE    /dev/hda  hdb SCSI   sda     sdb 分区 ...

  3. 【AI】【人工智能】【计算机】人工智能工程技术人员等职业信息公示

    人社厅发[2019]48号 各省.自治区.直辖市及新疆生产建设兵团人力资源社会保障厅(局).市场监管局.统计局,国务院各部门.各直属机构.各中央企业.有关社会组织人事劳动保障工作机构,中央军委政治工作 ...

  4. MySQL主从同步报错1507

    mysql 从库上手动删除partiton后,主库未做修改.后期主库上删除partiton后,出现问题. 故障现场 Last_Errno: 1507 Last_Error: Error 'Error ...

  5. Vue(一)环境搭建、创建项目

    1.安装node和npm 因为node已经有npm,所以直接安装node,配置环境变量 官网地址:http://nodejs.cn/download/ 2.查看node是否安装成功,输入名nde -v ...

  6. 关于SpringMVC中的转发与重定向的说明

    写的非常详细,参看该地址:https://www.zifangsky.cn/661.html 总结: 1.请求转发:url地址不变,可带参数,如?username=forward 2.请求重定向:ur ...

  7. dede添加自定义变量不显示

    dedecms前端无法调用自定义变量要怎么解决,登录他的网站后台看了一下,自定义变量已经添加了,也写入了数据库表中,但是就是前台没办法调用出来,后面想想可能是文件权限不够,具体是哪个文件呢?查了相关文 ...

  8. easyui datagrid 合并相同行

    $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...

  9. 牛客 197C 期望操作数

    大意: 给定$x,q$, 每步操作$x$等概率变为$[x,q]$中任意一个数, 求变为$q$的期望操作数. 很容易可以得到$f(x,q)=\frac{\sum\limits_{i=x+1}^qf(i, ...

  10. luogu P4762 [CERC2014]Virus synthesis (回文自动机)

    大意: 初始有一个空串, 操作(1)在开头或末尾添加一个字符. 操作(2)在开头或末尾添加该串的逆串. 求得到串$S$所需最少操作数. 显然最后一定是由某个偶回文通过添加字符得到的, 那么只需要求出所 ...