题记:

看过网上一些as3事件流的教程,觉得大多都讲得不甚清楚,让人不能直观的理解事件流。而这篇教程以将事件流过程比喻成捕鱼过程,形象简单。

在此基础上对于as3事件流总算有了全面的理解。事件流机制说白了就是为了能让开发者能更好地控制事件调用顺序。

addEventListener(type:String, listener:Function, useCapture:Boolean= false, priority:int= 0, useWeakReference:Boolean= false):void

as3事件流机制规定了每个事件都分为捕获、目标、冒泡阶段;

平时在使用addEventListener监听事件时,useCapture默认为false,也就是默认监听事件的目标、冒泡阶段;当把useCapture默认为true时,则监听事件的捕获、目标这两个阶段。

可以这么说,假定有两个监听器监听了同一事件,当事件派发时,useCapture为true的监听器比useCapture为false的监听器会更快得到响应处理。因为前者在事件捕获阶段(撒网过程)就被进行了处理,后者在事件冒泡阶段(收网过程)才被进行处理。谁快谁慢,自然很明显。

而priority则是规定每个监听器的处理优先级,useCapture相同情况下,priority值越大,就越优先进行处理。这样,通过合理地设置useCapture,priority,我们就可以随心所欲地确定监听器的调用顺序。

另外我们可以还用stopImmediatePropagation&stopPropagation这两个方法,来阻止事件流对后续的事件监听器进行处理。stopPropagation会处理响应完该事件监听后,就不再处理后续的监听器;而stopImmediatePropagation则会连同当前监听也忽略不处理。

转载正文:

as3事件流机制彻底理解
as3和dom的事件流都分三个阶段:捕获阶段、目标阶段、冒泡阶段。如果记不住这三个阶段的顺序,想象以下捕鱼的过程,捕鱼也分三个阶段:撒网、捕捉,捞起,三个阶段从上向下。

 
为什么要事件流要分三个阶段呢?
 
这一切都是因为“显示列表”,没有显示列表,也就不会有事件流。在显示列表中,假设,s:舞台;c:容器;b:按钮。
 
点击按钮b,b应该发出click事件,这没错。从常识上来说,点击了b,也就间接点击了c吧,因为c包含b,那么c也应该发出click事件,同理s也应该发出click事件。问题就来了,s、c、b发出click事件的顺序该如何处理?
 
用盒子模型来理解,要想“摸东西”,肯定要从最外层的盒子开始摸起,层层向内摸,所以事件流的第一阶段是捕获阶段,由外至内。接着就是目标阶段。摸完东西,手就要缩回来,缩回来的过程就是冒泡阶段。
 
捕获阶段和目标阶段我们很容易理解,从外向内依次发出事件,那为什么还要有冒泡阶段呢?冒泡阶段是为了满足用户灵活处理事件的需求而产生的。只有捕获和目标阶段,那么用户就必须先处理s的click事件,然后是c的click事件,最后才是b。但好多时候,用户是想先处理b的click事件,然后才是c,最后是s,冒泡阶段由此而生。
 
addEventListener(type:String, listener:Function, useCapture:Boolean= false, priority:int= 0, useWeakReference:Boolean= false):void
用addEventListener监听事件,默认是目标阶段或者冒泡阶段,只有useCapture=true的时候,才是捕获阶段。b只有目标阶段,s和c有捕获和冒泡两个阶段。
 
function onClick(e:MouseEvent):void
{
    trace(e.target);
    trace(e.currentTarget);
}
 
b.addEventListener(MouseEvent.CLICK, onClick,  false); //e.target == e.currentTarget == b
b.addEventListener(MouseEvent.CLICK, onClick,  true); //不会有任何效果。
 
c.addEventListener(MouseEvent.CLICK, onClick,  false); //e.target ==  b,e.currentTarget == c
c.addEventListener(MouseEvent.CLICK, onClick,  true); //e.target ==  b,e.currentTarget == c
 
s.addEventListener(MouseEvent.CLICK, onClick,  false); //e.target ==  b,e.currentTarget == s
s.addEventListener(MouseEvent.CLICK, onClick,  true); //e.target ==  b,e.currentTarget == s
 
注意,假如b.mouseChildren=false; b.mouseEnabled=false;那么以上所有的事件都没有效果了,因为没有事件的生产者了。你会问,c不能生产事件吗?不能,因为c是空白的,不能被点击。假如b不是按钮,而是shape或者图片,那么c就能产生事件了。因此,InteractiveObject是通过事件流使父容器发出事件的,非InteractiveObject是通过填充父容器,而使其直接发出事件。
 
 
记住,事件流因显示列表而生,像捕鱼一样有三个阶段:捕获、目标、冒泡。
 

[转]as3事件流机制彻底理解的更多相关文章

  1. AS3事件流机制

    事件流: 显示对象,深度 MouseEnabled,MouseChildren:显示对象,同层次(父容器为同一对象)遮挡问题

  2. js事件流机制冒泡和捕获

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...

  3. javascript事件流机制

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  4. AS3事件机制概述

    事件机制是AS3的核心功能之一,没有充分掌握事件机制的方方面面,就不能算是精通AS3语言. 1. AS3事件机制的主要成员 IEventDispatcher:事件派发对象接口,定义了添加.派发.移除. ...

  5. 理解jquery on 委托事件的机制

    前两天做了一个点击任意位置,都能关闭菜单的功能,因为菜单里面的每一个a,的点击事件都是用on绑定的.所以在阻止冒泡的时候不管用,今天特意来理解一下on的机制 on 是委托事件,利用的就是冒泡原理 $( ...

  6. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  7. 深入理解DOM事件机制系列第一篇——事件流

    × 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...

  8. 新人补钙系列教程之:AS3事件处理--事件流

    一个flash应用程序可能会非常复杂,比如,有很多可视实例嵌套在一起,这样的话会形成一个树形结构,这个结构的根是stage,然后一级级到不同的实例,一般来说,要把这个树形结构倒过来看,即stage在顶 ...

  9. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

随机推荐

  1. js或jquery实现页面打印可局部打印

    方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclic ...

  2. 解决linux下unzip中文有乱码的问题

    xxx.zip 中有中文的文件,在linux下unzip就会有乱码. 解决办法:安装7zip 去http://sourceforge.net/projects/p7zip/files/latest/d ...

  3. C++ find 函数用法

    头文件 #include <algorithm> 函数实现 template<class InputIterator, class T> InputIterator find ...

  4. App界面交互设计规范(转)

    在上篇<APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计.在细节设计启动前,拉上设计师和安卓前端开发.ios前端开发一起商议确定设 ...

  5. matlab练习程序(简单多边形的核)

    还是计算几何, 多边形的核可以这样理解:这个核为原多边形内部的一个多边形,站在这个叫核的多边形中,我们能看到原多边形的任何一个位置. 算法步骤如下: 1.根据原多边形最大和最小的x,y初始化核多边形, ...

  6. 学习linux内核时常碰到的汇编指令(2)

    转载:http://blog.sina.com.cn/s/blog_4be6adec01007xvh.html JNGE∶指令助记符——(有符号数比较)不大于且不等于转移(等价于JL).当SF和OF异 ...

  7. T-SQL 使用WITH高效分页

    一.WITH AS 含义     WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候, ...

  8. LoadRunner Pacing设置(转)

    转载的,备读 在 LoadRunner 的运行场景中,有一个不大起眼的设置,可能经常会被很多人忽略,它就是Pacing .具体设置方式为: Run-Time settings à General à ...

  9. Android 在地图上画矩形

    point1=map.toMapPoint(400,426); point2=map.toMapPoint(600,640); initextext = new Envelope(point1.get ...

  10. 关于Vector中的元素中含有指针成员的情况

    对于容器,当容器的各个元素为类类型,且该类类型中含有指针成员时: 如果类类型的析构函数中包含了对指针变量指向内存的释放操作,则在利用clear()函数删除容器所有元素时,会自动调用类的析构函数,自动实 ...