[转]as3事件流机制彻底理解

时间：2024-06-19 19:05:20

题记：

看过网上一些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是通过填充父容器，而使其直接发出事件。
记住，事件流因显示列表而生，像捕鱼一样有三个阶段：捕获、目标、冒泡。

相关文章