Flex自定义组件 自定义事件 事件监听

完成一个自定义组件：一个简单的登录界面，在测试页面中引用。点击登录按钮，发布一个自定义的事件LoginEvent，在测试页面中监听这一事件。

1． 完成自定义的组件FlexLogin，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="438"  
           height="223" color="#37E115"  borderColor="#2DC8A2" 
           backgroundColor="#3DB80C">
	
	<mx:Label x="131" y="31" text="Flex自定义组件/事件" 
              fontSize="18" color="#0E0E0C"/>
	<mx:Label x="40" y="76" text="用户名" fontSize="15" color="#040C03"/>
	<mx:TextInput x="130" y="79" width="210" id="loginNameTxt"/>
	<mx:Label x="55" y="117" text="密码" fontSize="15"/>
	<mx:TextInput x="130" y="120" width="210" id="loginPwdTxt"/>
	<mx:Button x="130" y="163" label="登录" fontSize="15" 
                    id="loginBtn"  click="userLogin()"/>
	
	<mx:Script>
		<![CDATA[
			import com.event.LoginEvent;
			 
			 private function userLogin():void{
			 	 var loginName:String = loginNameTxt.text;
			 	 var loginPwd:String = loginPwdTxt.text;
			 	 //创建自定义的事件
			var loginEvent:LoginEvent = new LoginEvent(loginName, loginPwd);
			 	 //分发（广播）事件;当点击登录按钮时就触发了这一事件
			 	 this.dispatchEvent(loginEvent);
			 }
			 
		]]>
	</mx:Script>
	
    //由于是自定义的组件,如何知道它有哪些事件-----通过元数据  
    //以下据表明：本组件FlexLogin有一个userLogin事件，类似与Button组件的click事件，
    // 类型为LoginEvent,类似于Button的MouseEvent

	<mx:Metadata>
		[Event(name="userLogin",type="com.event.LoginEvent")]
	</mx:Metadata>
	
</mx:Canvas>

2． 自定义事件LoginEvent， 代码如下：

package com.event
{
	import flash.events.Event;
	
	public class LoginEvent extends Event
	{
		public static const eventType:String = "userLogin";
		public var loginName:String;
		public var loginPwd:String;
		public var loginDate:String = "20xx-xx-xx";
		public var loginPlace:String = "上海";
		
		public function LoginEvent(loginName:String, loginPwd:String)
		{
			super(eventType);
			this.loginName = loginName;
			this.loginPwd = loginPwd;
		}

	}
}

3． 使用自定义组件，发布事件。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
//声明前缀，类似jsp自定义标签	            
xmlns:lijie="com.component.*" 
creationComplete="initApp()"> 
    //引用组件
	<lijie:FlexLogin/>  

	<mx:Script>
		<![CDATA[
			import com.event.LoginEvent;
			import mx.controls.Alert; 
			private function initApp():void{ 
				this.addEventListener("userLogin",userLoginHandler); 
			} 
            //注意加参数：事件类型
			private function userLoginHandler(event:LoginEvent):void{ 
                //处理代码    			
            } 
		]]>
	</mx:Script> 
</mx:Application>

点击“登录”按钮，发布LoginEvent事件，但userLoginHandler方法并未执行，说明父容器Application没有监听到LoginEvent事件。为什么无法监听到？这个涉及到Flex的事件机制。

Application作为FlexLogin的父容器，可以在LoginEvent事件的捕获或者冒泡阶段监听到这一事件。

1.捕获阶段：为了在捕获阶段监听到事件，需要修改监听器注册方法，将this.addEventListener("userLogin",userLoginHandler) 修改为this.addEventListener("userLogin",userLoginHandler,true) 参数true表示在捕获阶段监听事件。

2.冒泡阶段：this.addEventListener("userLogin",userLoginHandler); 默认表示在冒泡阶段监听事件，但问题是：如果事件本身不参与冒泡过程，那么监听器就无法监听到这一事件。 查看LoginEvent的构造方法 super(eventType) ,  只指明了事件类型，默认不参与冒泡。为了使事件冒泡，需要将第二个参数设置为true ，即super(eventType,true)