Flex中的事件传播

    Flex这种技术有点儿类似Html+js,对应到后者上,MXML对应Html,actionscript3.0对应js,而actionscript又非常类似java,学起来非常的得心应手。下面进入正题,flex中的事件传播也有些类似dom中的事件传播,当然在不同浏览器里面事件的传播是不一样的,而在flex中做了一个综合,flex中事件传播分为三个阶段,第一个阶段称为捕获阶段,第二个阶段称为定位阶段,第三个阶段称为冒泡阶段。第一个阶段事件是从顶部容器一直传播到事件发生节点的父容器,第二个阶段只在事件发生节点调用,第三个阶段则从事件发生节点的父节点一直冒泡到顶级容器,在这过程中任何节点若添加了监听器,该监听程序都会被触发,并且会传入一个Event参数,这一点和传统的web中的事件监听有些类似。在对某一个控件添加事件的时候调用的是所有控件都实现了的EventDispatcher类的addEventListener方法,该方法有一个useCapture参数,该参数能够影响事件的传播机制,默认该参数值为false,在false的时候,事件传播只会执行冒泡这一阶段,事件从顶级节点开始向下传播,当传播到事件发生节点的父节点时停止下来不再向后执行;当为true的时候,事件从第二阶段开始执行,首先在事件发生节点触发监听程序,然后进入第三阶段,事件从事件发生节点的父节点开始向上传播直到顶级节点。通俗的说就是false的时候事件只从顶级节点向事件发生节点方向传播,true的时候事件只从事件发生节点向顶级节点传播,倘若需要两个阶段都发生则需要调用两次add**方法。     下面看一段例子: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" applicationComplete="appLoadedFun()">  <mx:Script>   <![CDATA[    import mx.core.UIComponent;    import mx.events.FlexEvent;     public function appLoadedFun():void    {     myPanel.addEventListener(MouseEvent.CLICK,eventLisner,true);     application.addEventListener(MouseEvent.CLICK,eventLisner,true);     myBtn.addEventListener(MouseEvent.CLICK,eventLisner,true);    }    public function eventLisner(evnt:Event):void    {     myLabel.text += UIComponent(evnt.currentTarget).className + " captured the event!\n";    }   ]]>  </mx:Script>  <mx:Panel id="myPanel" title="Bubbling Test" width="500" height="500">   <mx:Button label="Bubbling Test" id="myBtn"/>   <mx:Label id="myLabel" width="100%" height="100%"/>  </mx:Panel> </mx:Application> 此时点击按钮运行的结果为: EventBubble captured the event! Panel captured the event! 当把粗斜体部分的useCapture参数改为false的时候运行结果为: Button captured the event! Panel captured the event! EventBubble captured the event!

Leave a Reply

Your email address will not be published. Required fields are marked *

You must enable javascript to see captcha here!