FLEX实践： 组件传递事件的处理

来看下面两个例子：

自定义事件 LoginEvent.as

package Events
{
    import mx.events.FlexEvent;
   
    public class LoginEvent extends FlexEvent
    {
        public function LoginEvent()
        {
            super("LoginEvent",true);
        }

    }
}

 

自定义组件 LoginComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" backgroundColor="#FADCA2">
    <mx:Script>
    <![CDATA[
        import Events.LoginEvent;
     public function sub():void{
         username.text="crystal";
         dispatchEvent(new LoginEvent);
     }
    ]]>
    </mx:Script>
    <mx:TextInput x="111" y="44" id="username"/>
    <mx:Button x="154" y="132" label="Submit" click="sub()"/>
   
</mx:Canvas>

 

主页面 LoginTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:mp="myComponent.*" creationComplete="init()">
    <mx:Script>
    <![CDATA[
        import Events.LoginEvent;
     private function submit():void{
         login.sub();
     }
     private function init():void{
         this.addEventListener("LoginEvent",loginHandler);
     }
     private function loginHandler(evt:LoginEvent):void{
         tt.text="meteor";
     }
    ]]>
    </mx:Script>
    <mp:LoginComponent id="login"/>
    <mx:Button x="551" y="152" label="Event Test" click="submit()" />
    <mx:Label x="551" y="92" text="Label" id="tt"/>
   
</mx:Application>

 

运行本例的结果是单击LoginComponent中的BUTTON后，主页上的LABEL值会变成“meteor”;

 

再来看下面的例子

自定义事件 LoginEvent.as

package Events
{
    import mx.events.FlexEvent;
   
    public class LoginEvent extends FlexEvent
    {
        public function LoginEvent()
        {
            super("LoginEvent");
        }

    }
}

 

LoginComponent.mxml , LoginTest.mxml与上面的例子相同

运行本例的结果是单击LoginComponent中的BUTTON后，主页上的LABEL值不会改变

 

分析：

自定义事件时的构造方法中的第二个参数默认为FALSE，表示事件传递不能跨越组件本身。若想让组件传递的事件能被其他页面捕捉到，该参数需设置为TRUE。