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绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...
随机推荐
- bootstrap基础学习【菜单、按钮、导航】(四)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- POJ 1789 Truck History【最小生成树模板题Kruscal】
题目链接:http://poj.org/problem?id=1789 大意: 不同字符串相同位置上不同字符的数目和是它们之间的差距.求衍生出全部字符串的最小差距. #include<stdio ...
- poj2406(求字符串的周期,kmp算法next数组的应用)
题目链接:https://vjudge.net/problem/POJ-2406 题意:求出给定字符串的周期,和poj1961类似. 思路:直接利用next数组的定义即可,当没有周期时,周期即为1. ...
- 输出重定向之python2和python3的区别
python语句支持输出重定向到文件里,与shell类似使用“>>”来重定向输出. python2: logfile = open('mylog.txt', 'a') print > ...
- storm group 的介绍与使用
一.stream group分组介绍 Stream 的分组分为随机分组.字段分组.全部分组.全局分组.无分组.直接分组,自定义分组 二.group的介绍 1.Shuffle grouping:通过tu ...
- [转帖]三款Nehalem至强5500塔式服务器横评对决(4)
三款Nehalem至强5500塔式服务器横评对决(4) http://tech.sina.com.cn/b/2009-12-14/05051172233_4.shtml 可以看到两路服务器的设置 基本 ...
- url-pattern / 与/* 的区别
其中/和/*的区别:< url-pattern>/</url-pattern> 会匹配到/login这样的路径型url 不会匹配到模式为*.jsp这样的后缀型url,即:*.j ...
- 【51nod】2564 格子染色
[51nod]2564 格子染色 这道题原来是网络流-- 感觉我网络流水平不行-- 这种只有两种选择的可以源点向该点连一条容量为b的边,该点向汇点连一条容量为w的边,如果割掉了b证明选w,如果割掉了w ...
- mysql数据库的 varchar 和 char 的区别
char是存储字符(无论字母还是汉字都最多存255个) char(20)表示这个字段最多存20个字符 如果存了16个字符 那么也会占用20个字符的空间 varchar是存储字节(1个字母1个字节 ...
- MongoDB实战读书笔记(二):面向文档的数据
1 schema设计原则 1.1 关系型数据库的三大设计范式 第一范式(1NF)无重复的列 第二范式(2NF)属性完全依赖于主键 [ 消除部分子函数依赖 ] 第三范式(3NF)属性不依赖于其它非主属性 ...