Flex学习笔记——关于Flex里的事件

事件是Flex重要的部分，对于事件的学习也是Flex学习中重要的环节
1,简单的事件派发
这里先新建一个项目，再新建一个Component名字为EventImage，这个组件EventImage的mxml代码如下：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
 
 <mx:Script>
  <![CDATA[   
   private function complete() : void
   {
    this.dispatchEvent( new Event(Event.COMPLETE ));
   }
  ]]>
 </mx:Script>
 <mx:Image id="image" complete="complete()" />
</mx:TitleWindow>

 

这里我将事件的类型直接用 flash.vents.Event.COMPLETE。
再看主程序的代码：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  fontSize="12"  xmlns:local="*"  creationComplete="init()">
<mx:Script>
 <![CDATA[
  private function init () : void
  {
   myImage.addEventListener(Event.COMPLETE,completeHandler);
   myImage.image.source = '1.jpg';
  }
  private function completeHandler( e : Event ) : void
  {
   trace('图片加载完成');
  } 
 ]]>
</mx:Script>

<local:EventImage id="myImage" />
</mx:Application>

 

使用Event元标签可以直接在组件的mxml代码里定义事件，如上<local:EventImage  complete="completeHandler(event)"  />
注意[Event(name="complete",type="flash.events.Event")]里边的name指的是 this.dispatchEvent( new Event(Event.COMPLETE ))语句里的Event.COMPLETE的值，type指的是事件类型。
如果不想用flash的Event类，可以自定义一个事件类，请继承Event类。
如果想让一个类具有派发事件的能力，请继承EventDispatcher类。
如果直接在as类中使用Event标签，直接在类名前添加[Event(name="complete",type="flash.events.Event")]即可。
上面的描述中请区分Event元标签和Event类，虽然名称一样但是意义就差很远了。

3,自定义触发器将事件和效果关联起来

首先新建一个类EffectTitleWindow继承 TitleWindow 代码如下：

 

package
{
 import flash.events.Event;
 import flash.events.MouseEvent; 
 import mx.containers.TitleWindow;
 
 [Event(name="hideWin", type="flash.events.Event")]
 [Event(name="showWin", type="flash.events.Event")]
 
 [Effect(name="hideWinEffect",event="hideWin")]
 [Effect(name="showWinEffect",event="showWin")]
 
 public class EffectTitleWindow extends TitleWindow
 {
  public function EffectTitleWindow()
  {
   super();
   this.addEventListener(MouseEvent.CLICK, clickHandler);
  }
  
  private var ck : Boolean = true;
  private function clickHandler( e : MouseEvent ) : void
  {
   if( ck )
   {
    this.dispatchEvent( new Event("hideWin"));
   }
   else
   {
    this.dispatchEvent( new Event("showWin") );
   }
   ck = !ck;
  }
 }
}

 

 

然后在主程序中输入以下代码：

<mx:Fade id="hide" duration="500" alphaFrom="1" alphaTo="0" />
<mx:Fade id="show" duration="500" alphaFrom="0" alphaTo="1" />
<local:EffectTitleWindow 
  hideWinEffect="{hide}"  
  showWinEffect="{show}"  
  width="200" height="200"/>

 

 

 

 

 

当图片加载完成的时候的会输出 '图片加载完成'的字符串。当程序初始化的时候 首先给myImage添加了事件监听，监听类型为Event.COMPLETE的事件。
当myImage中的image加载图片完成时，会派发一个类型为Event.COMPLETE的事件。换句话说直接调用了主程序的函数completeHandler。

 

2，使用Event元标签：

稍作上面的代码的修改，便可了解Event元标签
EventImage：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Metadata>
  [Event(name="complete",type="flash.events.Event")]//Event元标签的写法
 </mx:Metadata>
 <mx:Script>
  <![CDATA[   
   private function complete() : void
   {
    this.dispatchEvent( new Event(Event.COMPLETE ));
   }
  ]]>
 </mx:Script>
 <mx:Image source="1.jpg"  complete="complete()" />
</mx:TitleWindow>
  

 

主程序：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  fontSize="12"  xmlns:local="*" >
<mx:Script>
 <![CDATA[  
  private function completeHandler( e : Event ) : void
  {
   trace('图片加载完成');
  } 
 ]]>
</mx:Script>
<local:EventImage  complete="completeHandler(event)"  />
</mx:Application>