Freddie's Ria World

我们需要通过几个类来了解冒泡事件，很多类型的事件都可以冒泡：mouse-down事件，click
事件，keyboard 事件。术语“向上冒泡”指的是事件通过其自身的处理方式从显示列表传递
到应用程序容器，这就像水里的气泡上升到水面那样。当用户点击任何组件时，其事件就会
通过层级向上传递，也就意味着父组件也能监听到click事件，无论哪个子组件发出事件，父
组件都能收到。要想父组件监听所有子组件发出的某一类型的事件，父组件只需添加一个事
件监听器即可收到子组件传递过来的事件。

BubbleComponent:

<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″ height=”300″>
    <mx:Script>
        <![CDATA[
            private function sendClick():void{
                trace("BubbleComponent::Click");
            }
        ]]>
    </mx:Script>
    <mx:Button click=”sendClick()”/>
</mx:HBox>

BubbleHolder:

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
    width=”400″ height=”300″ xmlns:ns1=”*”>
    <mx:Script>
        <![CDATA[
            private function handleClick():void{
                trace("BubbleHolder::click");
            }
        ]]>
    </mx:Script>
    <ns1:BubbleComponent x=”0″ y=”0″ click=”handleClick()”>
    </ns1:BubbleComponent>
</mx:Canvas>

BubbleTest(主程序，MXML application)

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:ns1=”*”>
    <mx:Script>
        <![CDATA[
            private function handleClick():void{
                trace("main prog");
            }
        ]]>
    </mx:Script>
    <ns1:BubbleHolder x=”10″ y=”10″ click=”handleClick()”>
    </ns1:BubbleHolder>
</mx:Application>

BubbleComponent.mxml中的click事件将被广播一直传到应用程序层。
MouseEvent类中的事件序列发出关于此事件的信息，比如click事件和click时鼠标的位置，通
过显示列表到达所有的子节点，接着子节点接收此事件，然后从显示列表返回到Stage。
Stage 检测MouseEvent 并传递它到显示列表，直到找到此事件的目标，这就是用户与之交互
的目标组件，这被称之为捕获阶段。接着，事件目标对象的事件处理函数被调用，这称之为
目标阶段，最后，冒泡阶段触发，发送事件返回给显示列表给其他监听器,所有方式重新回
到Stage 阶段。

程序运行结果:

BubbleComponent::Click
BubbleHolder::click
main prog

您可能也会关注:

• 3.13 通过LinkBar 控制ViewStack
• 1.12使用代码隐藏模式分离MXML和ActionScript
• 1.15监听键盘事件
• 3.22在容器中滚动到某个指定的子组件
• 6.4过滤DataGrid数据项