Flex事件冒泡机制

在网上浏览了几篇文章，大体总结了一下，简单说明如下：

事件的传递分为三个阶段，如图：捕获阶段(Capture Phase)、目标阶段、冒泡阶段，比如当你点击了一下Child1 Node时，事件会从Stage->Parent Node->Child1 Node一路传过来（捕获阶段），传到Child1 Node时，执行Child1 Node的相应事件函数（目标阶段），然后传回Stage（冒泡阶段）。

 

1、  创建一个Flex Project,名称为:Demo;

2、  切换到Design模式下,添加一个Panel和一个Button，其效果如下：

3、  切换到Source模式下，为程序添加事件，其代码如下：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>

        <![CDATA[

            import mx.controls.Alert;

            private function showDif(event:MouseEvent):void

            {

                Alert.show("目标ID = " + event.target.id +

                "\n 当前目标ID = " + event.currentTarget.id);

            }

        ]]>

    </fx:Script>

    <s:Panel x="104" y="113" width="250" height="200"

             title="target和currentTarget" fontSize="14"

             fontFamily="Times New Roman" color="#F30909"

             id="panel_object">

        <s:Button x="89" y="54" label=" 测 试 "  id="button_object"

                  click="showDif(event)"/><!—事件由Button控制-->

    </s:Panel>

</s:Application>

单击测试按钮，效果如下：

4、  修改源程序，事件由Panel触发，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>

        <![CDATA[

            import mx.controls.Alert;

            private function showDif(event:MouseEvent):void

            {

                Alert.show("目标ID = " + event.target.id +

                "\n 当前目标ID = " + event.currentTarget.id);

            }

        ]]>

    </fx:Script>

    <s:Panel x="104" y="113" width="250" height="200"

             title="target和currentTarget" fontSize="14"

             fontFamily="Times New Roman" color="#F30909"

             id="panel_object"  click="showDif(event)"><!—事件由Panel触发-->

        <s:Button x="89" y="54" label=" 测 试 "  id="button_object" />

    </s:Panel>

</s:Application>

运行程序后，点击测试按钮以及点击Panel面板，效果如下：

     

记住：

①     target对象总是抛出事件的对象，currentTarget对象是处理事件的对象，很多情况下他们是相同的，但不总是这样。

②     所有Event对象都有target 和currentTarget属性，target 属性可引用事件分派对象，currentTarget属性可引用正在被检测事件监听器的当前节点。

③     在事件将在控件链中向上冒泡，在此过程中target 始终不变，currentTarget在每个向上移动的过程中及时改变。

④     例如当用户点击一个Button控件，很可能事件派发者是Button的内部子组件UITextField，事件向上冒泡过程中target 始终为 UITextField不变，但currentTarget会逐步冒泡到Button组件，这时，触发了在Button上监听的Click事件处理函数。

⑤     开发人员一般使用event.currentTarget属性，event.target 属性很少使用。

 

 

事件流机制分为三个阶段：捕获、目标、冒泡。
addEventListener默认关闭了捕获阶段，打开冒泡阶段。并且捕获和冒泡阶段貌似是不能共存的。

一、没有捕获阶段（默认执行）具体是怎么执行的呢？
比如说有abc三个容器。同时对abc三个容器进行单击监听。
a.addEventListener(MouseEvent.CLICK,clickHandle);
b. addEventListener(MouseEvent.CLICK,clickHandle);
c. addEventListener(MouseEvent.CLICK,clickHandle);
我单击了c容器。
1、首先执行的是目标阶段。也就是我鼠标单击事件的目标是c容器，执行c容器的clickHandle函数。目标阶段完成。
2、冒泡阶段：将单击的事件冒泡上去，b获得了单击事件，执行clickHandle函数。然后就是c获得单击事件，执行clickHandle函数。

二、打开捕获
打开捕获阶段是怎么样的呢？
我单机了c容器。
1、捕获开始。a捕获到了单击事件执行函数。然后是b捕获到了单击事件执行函数。捕获阶段结束。
2、目标阶段开始。事件流终于流到了目标c，执行c的clickHandle函数。

========----- 以下内容于 2010-02-27 02:06:13 追加 -----========

总结：
1、捕获关闭后，顺序cba，由目标冒泡到父容器，一层一层上去。捕获打开后，顺序abc，由父容器一层一层下去直到目标事件。
2、事件evt:MouseEvent中evt的重要属性有：evt.target（事件目标，指c）、evt.currentTarget（当前事件所处的目标，指冒泡或者捕获阶段当前目标）。