在as中監聽自定義事件

場景描述：點擊一張圖片，響應事件。必須在AS中，去監聽事件，並處理事件。

1 自定義了一個事件，如下：

package bridge {
	import flash.events.Event;
	
	import mx.events.FlexEvent;
	
	public class MyEvent extends Event {
		
		public static const myclick:String="myclick";
		
		public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
	
	}
}

2  監聽事件處理的AS類，如下：

package handler
{
	import bridge.MyEvent;
	
	import flash.events.Event;
	
	import mx.controls.Alert;
	
	import skin.ImgHanderSkin;
	
	import spark.components.BorderContainer;
	import spark.components.Image;

	public class ImgHander extends BorderContainer
	{
		
		
		[SkinPart(required="true")]
		public var img:Image;// 打開按鈕
		
		public function ImgHander()
		{
			super();
			this.setStyle("skinClass",ImgHanderSkin);
			this.percentHeight=100;
			this.percentWidth=100;
		}
		
		//初始化監聽
		override public function initialize():void{
			
			super.initialize();
			img.addEventListener(MyEvent.myclick,SetImgShouZhanUrl);
			
		} 
		
		
		private function SetImgShouZhanUrl(event:Event):void {
			Alert.show("Preview");
		}
		
		
	}
}

3 新建MXML外觀，皮膚類，在這裏發送自定義事件。(在assert文件夾下有一張圖片哦:柯南.jpg）如下：

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark SkinnableContainer container.  

     @see spark.components.SkinnableContainer
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    <fx:Metadata>[HostComponent("spark.components.BorderContainer")]</fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[         
			import bridge.MyEvent;
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                }
                else
                {
                    background.visible = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
			
			private function img_mouseOutHandler(event:MouseEvent):void{
			
				// TODO Auto-generated method stub
				var e:MyEvent= new MyEvent(MyEvent.myclick);
				img.dispatchEvent(e);
			
			}
			
			
			
			
        ]]>        
    </fx:Script>
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
    
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
		
		
		<s:Image id="img" click="img_mouseOutHandler(event)" source="assert/柯南.jpg">
			
		</s:Image>
		
		
    </s:Group>

</s:Skin>

4  最後，創建一個MXML應用程序裏面，去調用，AS類。直接運行。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600" 
			   xmlns:handler="handler.*">

	
	<handler:ImgHander>
		
	</handler:ImgHander>
	
	
</s:Application>

結束！

注意：1 發送自定義事件：

var e:MyEvent= new MyEvent(MyEvent.myclick);
img.dispatchEvent(e);

            2  接收並處理事件：

img.addEventListener(MyEvent.myclick,SetImgShouZhanUrl);