[DOM Event Learning] Section 4 事件分发和DOM事件流

　　
　　事件分发机制: event dispatch mechanism.
　　事件流(event flow)描述了事件对象在数据结构中是如何传播的.
 

传播路径

　　事件对象(event objects)被分发给事件目标(event target),在分发开始的时候,在实现中必须先确定事件对象的传播路径.
　　这个传播路径必须是一个有序的list,其中包含了事件对象必须通过的事件目标.
 
　　对于DOM的实现来说,这个传播路径必须反映这个文档的分层树形结构, 路径list中的最后一个元素必须是该事件的目标元素(event target), 在这之前的所有元素被称为这个target的祖先(ancestor), 最接近target的一个祖先叫做它的parent. 
　　传播路径一旦确定,是不能被更改的. 对于DOM实现来说,即便是传播路径中的元素被移动或者删除, 此条规定也是生效的.
 
　　在DOM事件流中, 在事件对象分发的过程中, event listeners可能会改变event target在document中的位置, 这样的改变不会影响传播路径.
　　event listener中抛出的异常不能停止传播或者影响传播路径,异常不能传播到这个event handler之外.
 

Event phases

 
 
　　Capture phase: 事件对象必须从Window一路传播到target的parent. 也叫capturing phase. 
　　Event listeners registered for this phase must handle the event before it reaches its target.
 
　　Target phase: 事件对象必须到达它的target. 也叫at-target phase.
　　Event listeners registered for this phase mush handle the event once it has reached its target.
　　如果事件类型表明它不能冒泡,在这个阶段完成之后事件对象就停止了.
 
　　Bubble phase: 冒泡阶段. 事件对象从target的parent开始,逆向向祖先传播,最后到达Window结束. 也叫bubbling phase.
　　Event listeners registered for this phase must handle the event after it has reached its target.
 
　　Event object必须完成一个或多个phases. 如果一个phase不被支持或者被停止, 则该阶段被忽略.
　　比如Event.bubbles属性被置为false,表示不支持这个phase, 则这个phase被忽略.
　　Event.stopPropagation()在dispatch之前被调用,所有的phases都会被忽略.
 

完成Phase

　　实现中, 当有pending event targets在一个phase部分的传播路径中, 并且传播没有被Event.stopPropagation()停止, 必须让事件对象按下面的步骤完成一个event phase:
 
　　首先, 实现必须确定当前的target.
　　这个target必须是传播路径中的下一个pending event target,从第一个开始.
　　对event listeners来说, 这个target必须是listener在它上面注册的那个.
 
　　然后, 实现必须确定当前target的candidate event listeners.
　　这个必须是当前target上所注册的所有event listener的一个list, 其中各个listener是按照注册顺序排序的.
　　一旦确定之后, 这个list是不能被改变的, 增加或者移除listener不会影响当前目标对象的candidate event listeners.
 
　　最后,实现中必须按顺序处理所有的candidate event handlers, 并且在下列条件都满足的时候激发每一个handler:
　　1. The event object’s immediate propagation has not been stopped.
　　2. This listener has been registered for this event phase.
　　3. This listener has been registered for this event type.
 
　　在产生传播路径的时候, event在capture phase从Window传到document对象, 在bubble phase从document对象传到Window.
 
　　在event完成了传播路径中的所有phases之后, 它的Event.currentTarget必须被设置为null, Event.eventPhase必须被设置为0 (NONE).
　　Event(或继承Event的其他接口)的所有其他属性都不变. 包括Event.target属性, 它必须还是指向event target.
 
　　DOM Event flow就是上面这个模型的一个应用.
　　所有的事件都完成了capture和target phases, 一个事件是否要完成bubble phase取决于每一个事件的类型.
 
　　一些event listener有可能会引起其他事件的分发, 这样的事件是同步(synchronous)处理的. 也即, 第一个事件传播只有在新引起的事件分发完成之后才会resume.
 
 
 

参考链接

　　本文内容主要来自于其中的3.1 Event dispatch and DOM event flow
 
　　该文章的参考资料列表:
 
　　W3C的最新标准可以参见:
 

[DOM Event Learning] Section 4 事件分发和DOM事件流的更多相关文章

  1. [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event

    [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event   事件 事件(Event)是用来通知代码,一些有趣的事情发生了. 每一个Event都会被一个E ...

  2. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  3. [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

    [DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法   网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...

  4. 自定义控件（视图）2期笔记10：自定义视图之View事件分发机制（"瀑布流"的案例）

    1. Touch事件的传递:   图解Touch事件的传递,如下: 当我们点击子View 02内部的Button控件时候,我们就触发了Touch事件. • 这个Touch事件首先传递给了顶级父View ...

  5. cocos2d-x 事件分发机制 ——加速计事件监听

    加速计事件监听机制 在上一篇中介绍了cocos2d-x中的触摸事件机制,这篇来介绍下游戏中也常常常使用到的加速计事件,这些都是游戏中的常常要用到的. 移动设备上一个非常重要的输入源是设备的方向.大多数 ...

  6. cocos2d-x游戏引擎核心(3.x)----事件分发机制之事件从(android,ios,desktop)系统传到cocos2dx的过程浅析

    (一) Android平台下: cocos2dx 版本3.2,先导入一个android工程,然后看下AndroidManifest.xml <application android:label= ...

  7. cocos2d-x 事件分发机制 ——触摸事件监听

    cocos2d-x 3.0 出来已经好久了,也已经用3.0写了几个小游戏,感觉3.0的事件触发机制太赞了,随这里总结一下.也算是对知识的一种回顾和加深理解. 3.0的事件分发机制中.须要也只须要通过创 ...

  8. Js事件分发与DOM事件流

    这一篇比较透彻:https://www.jianshu.com/p/dc1520327022 点击了目标节点后,捕获阶段里事件会从外向目标传递:到了目标阶段,捕获和冒泡的执行顺序按照事件被定义的先后顺 ...

  9. Js-事件分发与DOM事件流

    原文地址:https://www.jianshu.com/p/dc1520327022 Js事件分发与DOM事件流 对JavaScript分发事件不熟悉,网上查阅相关资料整理后,记录一下对Javasc ...

随机推荐

  1. Android开发之Toast

    第一次在博客园发布文章,就把我刚弄明白的关于Android开发中的提示设置,分享给大家. Toast是Android中经常用到的一个方法,用于简单的用户提示,经过摸索我发现了Toast的两种使用方式, ...

  2. android帧动画,移动位置,缩放,改变透明度等动画讲解

    1.苦逼的需求又来了,需要实现一些动画效果,第一个想到的是播放gif图片,但是这样会占包的资源,并且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享 ...

  3. sqoop数据导出导入命令

    1. 将mysql中的数据导入到hive中 sqoop import --connect jdbc:mysql://localhost:3306/sqoop --direct --username r ...

  4. GROUP函数-GROUP_ID,GROUPING,GROUPING_ID

    GROUP_ID 首先我们看看官方的解释: 大意是GROUP_ID用于区分相同分组标准的分组统计结果. 解释起来比较抽象,下面我们来看看具体的案例. 例1:单一分组 SQL> select gr ...

  5. IOS 整体架构 和 MVC布局

    IOS的生态系统 IOS生态系统不仅仅是指产品,更重要的是指 iPhone/iPad/iPod/Mac +iCloud+App整个系统,包括Siri (部分设备不支持).FaceTime.Safari ...

  6. C语言 编程练习22题

    一.题目 1.编一个程序,输入x的值,按下列公式计算并输出y值: 2.已知数A与B,由键盘输入AB的值,交换它们的值,并输出. 3.给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位 ...

  7. [Web API] Web API 2 深入系列(4) Action的选择

    目录 ApiController HttpActionDescriptor IHttpActionSelector ApiController 在上节中,讲到如何选择并激活对应的IHttpContro ...

  8. HTML元素坐标定位，这些知识点得掌握

    文档坐标和视口坐标 视口坐标是相对于窗口的坐标,而文档坐标是相对于整个文档而言.例如,在文档坐标中如果一个元素的相对于文档的Y坐标是200px,并且用户已经把浏览器向下滚动了75px,那么视口坐标中元 ...

  9. react初始（2）

    既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力.我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接 ...

  10. 设计模式(Design Pattern)系列之.NET专题

    最近,不是特别忙,重新翻了下设计模式,特地在此记录一下.会不定期更新本系列专题文章. 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用 ...