Flex 理解事件流和事件冒泡

  

不论何时触发事件，Flash Player都会发布事件。如果事件目标不是屏幕上的可视元素，Flash Player可以直接向指定目标发布事件对象，例如Flash Player会直接向HTTPService组件发布result事件。然而，如果是屏幕中的可视元素，Flash Player发布事件时会让事件从最外部容器（即Application）开始向下传递到目标组件，然后回到Appliation容器。

事件流描述了事件对象如何在应用程序中进行传递。

事件流从概念上可分为3个部分：

1.      捕获期  包含了从根应用程序到事件目标之间的所有容器。

2.      目标期  由目标节点单独构成。

3.      冒泡期  包含了从目标返回根应用程序过程中遇到的所有元素。

 

事件可以在子组件中触发，并且可以让其父组件收到事件。下面这段代码演示了这一点：

 

<?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" minWidth="955" minHeight="600">

    <fx:Script>

       <![CDATA[

           import mx.controls.Alert;

           protected function clickHandler(event:Event):void{

              var msg:String = event.target.toString() + "clicked"; 

              Alert.show(msg);

           }

       ]]>

    </fx:Script>

    <s:Panel id="mypanel" click="clickHandler(event)">

       <mx:HBox id="hbox"

               click="clickHandler(event)">

           <mx:Button id="mybutton" click="clickHandler(event)"/>

       </mx:HBox>

    </s:Panel>

</s:Application>

 

若用户单击了Button, Flash Player 会向事件流中发布一个事件对象。该对象从Application开始移动，先移动到Panel, 再移动到Hbox, 最后到达Button.接下来事件对象开始“冒泡”, 经过Hbox 和Panel再次回到Application.