在as中监听自定义事件

谁借莪１个温暖的怀抱￠ 2022-01-31 15:21 272阅读 0赞

场景描述：点击一张图片，响应事件。必须在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"?>
    
    
    
    
    <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>
        
        
        <s:Rect id="background" left="0" right="0" top="0" bottom="0">
            <s:fill>
                
                <s:SolidColor id="bgFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>
        
        
        
        <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);