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

最新推荐文章于 2021-10-11 11:29:17 发布

wbszlj

最新推荐文章于 2021-10-11 11:29:17 发布

阅读量267

点赞数

分类专栏： Flex 文章标签： java

Flex 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个Flex自定义登录组件的实现方法，并详细解释了如何定义与使用自定义事件LoginEvent。同时探讨了Flex事件机制中捕获与冒泡阶段的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完成一个自定义组件：一个简单的登录界面，在测试页面中引用。点击登录按钮，发布一个自定义的事件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>

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

[color=red]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) [/color]

[/b]