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

最新推荐文章于 2024-05-01 05:26:09 发布

ywltoread

最新推荐文章于 2024-05-01 05:26:09 发布

阅读量4.3k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 冒泡事件

JavaScript 专栏收录该内容

56 篇文章 2 订阅

订阅专栏

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

ywltoread

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

DOM事件三个阶段当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；目标阶段：到达目标事件位置（事发地），触发事件；冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。引用来源：http://www.w3.org/
复制链接

扫一扫

专栏目录