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

时间 2019-12-10

标签 dom 事件阶段以及捕获冒泡前后执行顺序栏目 HTML 繁體版

原文原文链接

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

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

DOM事件三个阶段html

当一个DOM事件被触发时，它不单单只是单纯地在自己对象上触发一次，而是会经历三个不一样的阶段：java

捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
目标阶段：到达目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

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

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

实验部分chrome

打开在线编辑器：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