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

开发过程中我们都希望使用别人成熟的框架，因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过，我们也应该、必须了解其基本原理。比如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

代码如下：

 <!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事件阶段以及事件捕获与事件冒泡先后执行顺序的更多相关文章

  1. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  2. javascript -- 事件捕获，事件冒泡

    使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...

  3. JS中事件绑定函数，事件捕获，事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  4. Javascript 事件对象（四）一个事件绑定多个不同的函数

    给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...

  5. 运行page页面时的事件执行顺序

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  6. 转:运行page页面时的事件执行顺序及页面的回发与否深度了解

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  7. .NET页面事件执行顺序

    摘自:http://www.cnblogs.com/kenkofox/archive/2011/03/18/1987998.html和http://blog.csdn.net/yiruoyun/art ...

  8. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  9. js事件捕获，事件冒泡，事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

随机推荐

  1. vue组件间的数据和方法传递

    方法 1.父组件调用子组件:ref(在子组件中加上ref即可通过this.$refs.ref.method调用) 2.子组件调用父组件:emit(this.$emit(调用的方法名,传递的参数)) 数 ...

  2. 实体框架自定义代码优先约定（EF6以后）

    仅限EF6仅向前 - 此页面中讨论的功能,API等在实体框架6中引入.如果您使用的是早期版本,则部分或全部信息不适用. 使用Code First时,您的模型是使用一组约定从您的类计算的.默认的Code ...

  3. C#动态对象(dynamic)示例(实现方法和属性的动态)

    C#的动态对象的属性实现比较简单,如果要实现动态语言那种动态方法就比较困难,因为对于dynamic对象,扩展方法,匿名方法都是不能用直接的,这里还是利用对象和委托来模拟这种动态方法的实现,看起来有点J ...

  4. Pushlets 配置参数详解

      基于 Pushlets 的消息推送设计 Pushlets 是通过长连接方式实现“推”消息的.推送模式分为:Poll(轮询).Pull(拉).本文围绕 Pull 模式进行设计. 原理 客户端发起请求 ...

  5. JavaScript -- 标签 ， Break 和 Continue 语句

    break 语句用于跳出循环. continue 用于跳过循环中的一个迭代. 标签引用,break 语句可用于跳出任何 JavaScript 代码块. demo: <!DOCTYPE html& ...

  6. activiti 用户手册中 10分钟 小例子 简单代码搭建 及 其中的 各种坑

    看mossle的 5.16 用户手册中的  快速起步:10分钟教程 想自己跑一下,虽然官方文档已经写的非常详细了,但是实际操作中还是遇到各种坑,这里记录下来. 首先官网下载最新的 5版本 full G ...

  7. 开发环境--Pipenv的使用

    1.Pipenv 介绍 Pipenv是基于pip的Python包管理工具,它和pip的用法非常相似,可以看做pip的加强版. pipenv解决了旧的pip+virtualenv+requirement ...

  8. PDF截取矢量图

    PDF截取矢量图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 方法与步骤 下载并安装 Adobe Acrobat X Pro 软件 点击右侧按钮(工具)-页面-裁剪-单击并选择区域-双击实 ...

  9. Redis记录-Redis命令

    Redis命令是用于在Redis服务器上执行一些操作.要在Redis服务器上运行命令,需要一个Redis客户端.Redis客户端在Redis包中有提供,这个包在我们前面的安装教程中就有安装过了. 语法 ...

  10. 【前端安全】JavaScript防XSS攻击

    什么是XSS XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击.本来缩小应该是CSS,但为了和层叠样式(Cas ...