DOM事件阶段以及事件捕获与事件冒泡先后执行顺序 - AlvinWei

标签: dom 事件 阶段 | 发表时间:2015-08-18 14:35 | 作者:AlvinWei
出处:

平时浏览这么多技术文章,如过不去实践、深入弄透它,这个技术点很快就会在脑海里模糊。要加深印象,就得好好过一遍。重要的事情说三遍,重要的知识写一遍。

开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过,我们也应该、必须了解其基本原理。比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心,浏览器才会走得更远。正如我们现在使用低版本浏览器打开某些页面时,会告知我们要用chrome等高级浏览器访问。不过这是一个革命的过程,为了让我们的webPage更好地服务更多的人,现在我们还不得不对这些历史遗留问题做更好的兼容。要做好兼容,除了依赖框架,我们得理解其基本原理。

 


DOM事件三个阶段

当一个DOM事件被触发时,它不仅仅只是单纯地在本身对象上触发一次,而是会经历三个不同的阶段:

  1. 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;
  2. 目标阶段:到达目标事件位置(事发地),触发事件;
  3. 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

引用来源:http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

事件捕获与事件冒泡先后执行顺序就显而易见了。

 


实验部分

 

 打开在线编辑器: http://jsbin.com/goqede/edit?html,css,js,output

代码如下:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 #outer{
8 text-align: center;
9 width: 400px;
10 height: 400px;
11 background-color: #ccc;
12 margin: 0 auto;
13 }
14 #middle{
15 width: 250px;
16 height: 250px;
17 background-color: #f00;
18 margin: 0 auto;
19 }
20 #inner{
21 width: 100px;
22 height: 100px;
23 background-color: #0f0;
24 margin: 0 auto;
25 border-rad
26 }
27 </style>
28 </head>
29 <body>
30 <div id='outer'>
31 <span>outer</span>
32 <div id='middle'>
33 <span>middle</span>
34 <div id='inner'>
35 <span>inner</span>
36 </div>
37 </div>
38 </div>
39 <script>
40 function $(element){
41 return document.getElementById(element);
42 }
43 function on(element,event_name,handler,use_capture){
44 if(addEventListener){
45 $(element).addEventListener(event_name,handler,use_capture);
46 }
47 else{
48 $(element).attachEvent('on'+event_name,handler);
49 }
50 }
51
52 on("outer","click",o_click_c,true);
53 on("middle","click",m_click_c,true);
54 on("inner","click",i_click_c,true);
55
56 on("outer","click",o_click_b,false);
57 on("middle","click",m_click_b,false);
58 on("inner","click",i_click_b,false);
59
60
61
62 function o_click_c(){
63 console.log("outer_捕获");
64 alert("outer_捕获");
65 }
66 function m_click_c(){
67 console.log("middle_捕获")
68 alert("middle_捕获");
69 }
70 function i_click_c(){
71 console.log("inner_捕获")
72 alert("inner_捕获");
73 }
74 function o_click_b(){
75 console.log("outer_冒泡")
76 alert("outer_冒泡");
77 }
78 function m_click_b(){
79 console.log("middle_冒泡")
80 alert("middle_冒泡");
81 }
82 function i_click_b(){
83 console.log("inner_冒泡")
84 alert("inner_冒泡");
85 }
86 </script>
87 </body>
88 </html>

当我们点击inner的时候结果是:

 

outer_捕获
middle_捕获
inner_捕获
inner_冒泡
middle_冒泡
outer_冒泡

由此可见:确实是先由外向内事件捕获,一直到事发元素,在由内向外冒泡到根节点上


tips:

当事件触发在目标阶段时,会根据事件注册的先后顺序执行,在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件,也注册了捕获事件,则按照注册顺序执行。

 例如当我点击inner的时候,按照以上顺序,答案确实是我们想要的答案:

当我的事件注册顺序改变成如下代码时:

当我们点击outer时:

当我们点击middle时:

当我们点击inner时:


可以看出在目标阶段的事发元素上的事件执行顺序是有事件注册顺序决定的

 

本文地址: http://www.cnblogs.com/alvinwei1024/p/4739344.html


本文链接: DOM事件阶段以及事件捕获与事件冒泡先后执行顺序,转载请注明。

相关 [dom 事件 阶段] 推荐:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序 - AlvinWei

- - 博客园_首页
平时浏览这么多技术文章,如过不去实践、深入弄透它,这个技术点很快就会在脑海里模糊. 重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升. 不过,我们也应该、必须了解其基本原理. 比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.

细说dom就绪事件

- - 崔永键的博客
OK,现在来谈谈DOM就绪事件. 这个问题,关系到浏览器内核实现,但我们作为前端,能力不及. 便从表象上去理解它,进而推断出对前端开发有所帮助的实践方案,就够了. OK,浏览器DOM加载顺序是什么样的呢. 可以参考IBM的一篇文章:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/.

兼容所有浏览器的 DOM 载入事件

- - Harttle Land
本文就页面载入问题讨论 DOMContentLoaded、 load、 readyState等DOM事件的浏览器兼容性, 并给出怎样绑定DOM载入事件以兼容所有的浏览器. 接着介绍jQuery对该问题的实现源码,以及jQuery中 $(document).ready()和 $(window).load()方法的区别.

样式表的载入会延迟DOM载入事件

- - Harttle Land
绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行. 不管是直接用 DOM API 实现还是使用 jQuery,最终都是 DOMContentLoaded事件在起作用. 本文讨论一个我们习以为常却很少了解的问题: 样式文件的载入会延迟脚本执行,以及 DOMContentLoaded事件的触发.

DOM详解

- - CSDN博客推荐文章
 1.XML解析方式分为两种:dom和sax.   (1)dom:(Document Object Model, 即文档对象模型) 是 W3C 组织推荐的处理 XML 的一种方式.   (2) sax:(Simple API for XML) 不是官方标准,但它是 XML 社区事实上的标准,几乎所有的 XML 解析器都支持它.

javaScript DOM使用

- - CSDN博客互联网推荐文章
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 1 修改HTML元素内容. document.write(Date()); //在输入流中直接写 document.getElementById(id).innerHTML=new HTML. //改变已经有的元素内容 document.getElementById("image").src="landscape.jpg";.

DOM优化

- - JavaScript - Web前端 - ITeye博客
1,Javascript语音与DOM操作就像孤岛. 他们之间的通行是要借助船的,而使用船是有很大成本的. 所以,要先做完一个再做另一个,最好不要交替进行. 如:添加1000个li时,先用一个字符串拼接好,最后一次追加到父节点,而不是向父节点追加1000次,一次追加一个. 如:添加1000个li时,先放到fragment,再添加到UL中.

Android DOM解析XML

- - CSDN博客移动开发推荐文章
if(personChilds.item(y).getNodeType()==Node.ELEMENT_NODE){//判断当前节点是否是元素类型节点. 作者:jaycee110905 发表于2013-2-7 21:04:29 原文链接. 阅读:78 评论:0 查看评论.

jquery和DOM比较

- - JavaScript - Web前端 - ITeye博客
1、window.onload和$(document).ready()的区别. 必须等整个网页中所有的内容加载完毕后(包括图片)才能执行. 网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完. 2、jquery对象和DOM对象的区别. Juery对象是包装DOM后的产生的对象,DOM是原生对象,是一个基本的文档结构.

Javascript的DOM操作

- - CSDN博客Web前端推荐文章
返回对拥有指定id的第一个对象进行访问. 返回带有指定名称的节点集合. 返回带有指定标签名的对象集合. 返回带有指定class名称的对象集合. 参数:是否复制原节点的所有属性. 注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做. 在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题.