FLEX中给组件添加自定义事件

最新推荐文章于 2024-11-01 15:14:54 发布

原创最新推荐文章于 2024-11-01 15:14:54 发布 · 4.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flex #encoding #login #application #web开发

FLEX 专栏收录该内容

8 篇文章

订阅专栏

FLEX 系统提供的事件与DOM的事件基本上完全一致但是和传统的WEB开发不同的是可以为自定义的组件添加自定义的事件比如我们做了一个组件是一个登录框当点击登录按钮的时候触发我们自定义的事件比如叫"login"事件虽然这个login事件归根结底还是某个按钮的click事件但自定义的事件比传统的事件有什么好处呢：一是事件的名字是自定义的可以形象的表示这个事件本身而不像以前还要关心是哪个按钮按了一下等等这样为组件与组件的通讯提供便利下面的例子中自定义了一个组件叫testComponent , 这个自定义的组件中有一个按钮和一个输入框, 当按下这个按钮的时候新建一个新的事件叫shareData

并且shareData事件被声明为一个textEvent ， textEvent可以通过text属性来传递数据（textInput控件的值）。

EventTest.mxml中引用了这个自定义组件testComponent 并捕获testComponent中的自定义事件shareData, 输出testComponent 中textInput控件的字符串

testComponent.mxml :（我们创建到：/src/view 文件夹下）

 
 <?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" height="300">
<!-- 声明本组件将抛出的事件 -->
<mx:Metadata>
 [Event(name="shareData",type="flash.events.TextEvent")]
<!-- 这里的 shareData相当于 click，将来的：event:TextEvent相当于e:MouseEvent -->
</mx:Metadata>
<mx:Script>
 <![CDATA[
  private function fnOnClick_testComp():void {
   //event1 构造函数 至少传递一个事件名，名字随便起
   var event1:TextEvent = new TextEvent("shareData");
   event1.text = myTxtInput.text;
   //使用disptchEvent 来抛出创建的事件
   dispatchEvent(event1);
  }
 ]]>
</mx:Script>
<mx:Label text="This is the Test component" />
 <mx:TextInput id="myTxtInput"/>
 <!-- 当点击按钮时进行自定义事件 -->
 <mx:Button label="clickMe" click="fnOnClick_testComp()" />
</mx:VBox>

eventTest.mxml :

 
 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 xmlns:view="view.*">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function fnOnShareData(event:TextEvent):void {
    Alert.show("event has been use. event.text => " + event.text );
   }
  ]]>
 </mx:Script>
 <!-- 调用我们自定义的组件  并处理它的shareData事件  就像click事件一样使用 -->
 <view:testComponent shareData="fnOnShareData(event)"/>
</mx:Application>