DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
平时浏览这么多技术文章，如过不去实践、深入弄透它，这个技术点很快就会在脑海里模糊。要加深印象，就得好好过一遍。重要的事情说三遍，重要的知识写一遍。
开发过程中我们都希望使用别人成熟的框架，因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过，我们也应该、必须了解其基本原理。比如DOM事件，jquery框架帮我们为我们封装和抽象了各浏览器的差异行为，为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化，我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心，浏览器才会走得更远。正如我们现在使用低版本浏览器打开某些页面时，会告知我们要用chrome等高级浏览器访问。不过这是一个革命的过程，为了让我们的webPage更好地服务更多的人，现在我们还不得不对这些历史遗留问题做更好的兼容。要做好兼容，除了依赖框架，我们得理解其基本原理。
DOM事件三个阶段
当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：
- 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
- 目标阶段：到达目标事件位置（事发地），触发事件；
- 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
引用来源：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
事件捕获与事件冒泡先后执行顺序就显而易见了。
实验部分
打开在线编辑器：http://jsbin.com/goqede/edit?html,css,js,output
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#outer{
text-align: center;
width: 400px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
}
#middle{
width: 250px;
height: 250px;
background-color: #f00;
margin: 0 auto;
}
#inner{
width: 100px;
height: 100px;
background-color: #0f0;
margin: 0 auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
if(addEventListener){
$(element).addEventListener(event_name,handler,use_capture);
}
else{
$(element).attachEvent('on'+event_name,handler);
}
} on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true); on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false); function o_click_c(){
console.log("outer_捕获");
alert("outer_捕获");
}
function m_click_c(){
console.log("middle_捕获")
alert("middle_捕获");
}
function i_click_c(){
console.log("inner_捕获")
alert("inner_捕获");
}
function o_click_b(){
console.log("outer_冒泡")
alert("outer_冒泡");
}
function m_click_b(){
console.log("middle_冒泡")
alert("middle_冒泡");
}
function i_click_b(){
console.log("inner_冒泡")
alert("inner_冒泡");
}
</script>
</body>
</html>
当我们点击inner的时候结果是：
outer_捕获
middle_捕获
inner_捕获
inner_冒泡
middle_冒泡
outer_冒泡
由此可见：确实是先由外向内事件捕获，一直到事发元素，在由内向外冒泡到根节点上
tips：
当事件触发在目标阶段时，会根据事件注册的先后顺序执行，在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件，也注册了捕获事件，则按照注册顺序执行。
例如当我点击inner的时候，按照以上顺序，答案确实是我们想要的答案：
、
当我的事件注册顺序改变成如下代码时：
当我们点击outer时：
当我们点击middle时：
当我们点击inner时：
可以看出在目标阶段的事发元素上的事件执行顺序是有事件注册顺序决定的
本文地址:http://www.cnblogs.com/alvinwei1024/p/4739344.html
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序的更多相关文章
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- javascript -- 事件捕获，事件冒泡
使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...
- JS中事件绑定函数，事件捕获，事件冒泡
1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...
- Javascript 事件对象（四）一个事件绑定多个不同的函数
给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...
- 运行page页面时的事件执行顺序
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...
- 转:运行page页面时的事件执行顺序及页面的回发与否深度了解
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...
- .NET页面事件执行顺序
摘自:http://www.cnblogs.com/kenkofox/archive/2011/03/18/1987998.html和http://blog.csdn.net/yiruoyun/art ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- js事件捕获，事件冒泡，事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
随机推荐
- Influxdb安装部署
1.下载Influxdb并解压 2.下载上图中的nssm(辅助性工具) 3. 在安装目录执行cmd 输入 nssm install influxdb,其中Path选择安装文件中的influxd,Ar ...
- swagger error: Conflicting schemaIds: Duplicate schemaIds detected for types A and B
使用Web API并使用swashbuckle生成swagger文档,我在两个不同的命名空间中定义了两个具有相同名称的不同类.当我在浏览器中打开swagger页面时,它说: Conflicting s ...
- OI回忆录第一章 逐梦之始
2013年春,初中零年级.GXZ来到吉大高中机房,参加一位老师曾在班级宣传的"计算机培训".同行的有这位老师,以及近80名同学.和同学们一样,GXZ也是为了在机房玩游戏而参加所谓的 ...
- VMXNET3 vs E1000E and E1000
VMXNET3 vs E1000E and E1000 用户为什么要从E1000调整为VMXNET3,理由如下: E1000是千兆网路卡,而VMXNET3是万兆网路卡: E1000的性能相对较低,而V ...
- 【arc093f】Dark Horse（容斥原理，动态规划，状态压缩）
[arc093f]Dark Horse(容斥原理,动态规划,状态压缩) 题面 atcoder 有 \(2^n\) 名选手,编号为 \(1\) 至 \(2^n\) .现在这 \(2^n\) 名选手将进行 ...
- BZOJ 4873 [Shoi2017]寿司餐厅 | 网络流 最大权闭合子图
链接 BZOJ 4873 题解 当年的省选题--还记得蒟蒻的我Day1 20分滚粗-- 这道题是个最大权闭合子图的套路题.严重怀疑出题人就是先画好了图然后照着图编了个3000字的题面.和我喜欢的妹子当 ...
- 【COGS2479】 HZOI2016—偏序
http://cogs.pro/cogs/problem/problem.php?pid=2479 (题目链接) 题意 四维偏序. Solution CDQ套CDQ. 细节 第二次分治不能直接按照mi ...
- 解题：HAOI 2015 按位或
题面 Min-Max容斥:对于集合S $min(S)=\sum_{s∈S}(-1)^{|s|+1}max(s)$ $max(S)=\sum_{s∈S}(-1)^{|s|+1}min(s)$ 那么这个题 ...
- 【洛谷P1823】音乐会的等待 单调栈+二分
题目大意:给定一个长度为 N 的序列,定义两个数 \(a[i],a[j]\) 相互看得见,意味着 \(\forall k\in [i+1,j-1],a[k]\le a[i],a[k]\le a[j]\ ...
- oracle执行update语句时卡住问题分析及解决办法
转载:http://www.jb51.net/article/125754.htm 这篇文章主要介绍了oracle执行update语句时卡住问题分析及解决办法,涉及记录锁等相关知识,具有一定参考价值, ...