flex事件（四）Flex自定义事件

　　自定义事件只是一个"特别"的ActionScript类。开发者创建自定义事件无外乎完成如下几个任务：继承flash.events.Event、定义事件属性、编写类构造器、重载clone方法。

一　继承Event带参数自定义事件

　　1.创建AS事件类SwitchLightEvent

package CustomTraficLight.events
{
    import flash.events.Event;
    
    import mx.controls.Alert;
    
    public class SwitchLightEvent extends Event
    {
        public static var SWITCH:String = "SwitchLightEvent";
        
        private var selectedLight:String;
        
        public function SwitchLightEvent(type:String, val:String)
        {
            super(type);
            selectedLight = val;
        }
        
        override public function clone():Event{
            return new SwitchLightEvent(type, selectedLight);
        }
        
        public function getSelectedLight():String {
            return selectedLight;
        }
        
    }
}

　　2.创建事件触发组件LightConsole

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="300" height="30">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Metadata>
        [Event(name="SwitchLightEvent", type="CustomTraficLight.events.SwitchLightEvent")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
            import CustomTraficLight.events.SwitchLightEvent;
            
            import mx.controls.Alert;
            
            private function clickEventHandler(varSelectedLight:String):void{
                dispatchEvent(new SwitchLightEvent(SwitchLightEvent.SWITCH, varSelectedLight));
            }
        ]]>
    </fx:Script>
    <mx:Button id="btnGreen" label="绿色" click="clickEventHandler('绿色')"/>
    <mx:Button id="btnRed" label="红色" click="clickEventHandler('红色')"/>
    <mx:Button id="btnBlue" label="蓝色" click="clickEventHandler('蓝色')"/>
</mx:HBox>

　　 3.创建应用CustomTraficLight

<?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"
               xmlns:views="CustomTraficLight.views.*"
               minWidth="955" minHeight="600"
               creationComplete="init()" >

    <fx:Script>  
        <![CDATA[  
            import CustomTraficLight.events.SwitchLightEvent;
            
            import mx.controls.Alert;
            
            
            private function init():void{  
                lc.addEventListener(SwitchLightEvent.SWITCH,clickHandler);  
            } 
            
            private function clickHandler(event:SwitchLightEvent):void{
                Alert.show(event.getSelectedLight());  
            } 
            
            
        ]]>  
    </fx:Script> 
    <views:LightConsole x="0" y="30" id="lc"/>
    <views:Lights x="0" y="0"/>
</s:Application>

创建自定义事件5个步骤

1.使用ActionScript创建自定义事件　　

　　定义属性
　　开发者通常希望"消息"能够携带更多的信息，提供更多的数据。在自定义事件中，通过定义属性，可以让事件携带更多的信息。

　　编写构造器

　　类当然离不开构造器。事件类的构造器要完成两项任务。

　　（1）. 调用Super()

　　通过Super()调用父类的构造器，以初始化从父类继承的属性等。通常情况下，子类构造器应该首先调用Super()方法。当然，如果没有为子类编写构造器（不添加构造器方法），编译器会自动添加一个构造器，并且也会调用Super()。但是，我们仍然推荐编写构造器，并且显式地调用Super()方法。

　　（2）. 设置属性

　　事件类型是最常用到的事件属性。Super()可以接受String类型的参数，由此设置父类事件中继承来的事件类型属性（event.type）。

除了事件类型外，事件的其他自定义属性可以作为构造器的参数传入，在构造器中完成初始化。更灵活的是，这些属性类型不仅仅局限于String、Number等基本类型，还可以是任何自定义类。

　　重载clone方法

　　创建自定义事件的最后一步是重载父类的clone方法，返回新的Event对象。当触发事件时，即dispatchEvent(event)时，EventDispatcher会自动调用clone方法获取新的Event对象。

重载clone方法将复制自定义类的所有属性。如果你没有对自定义事件类中添加的所有属性进行赋值的话，那么当侦听器处理触发的自定义事件时，就不会获得正确的属性值。

2.使用元数据[Event]定义事件

　　通过[Event]元数据，开发者可以为组件定义事件。编译器能够把这些自定义的事件识别为MXML标签属性。使用[Event]既可以为ActionScript组件定义事件，也可以为MXML组件定义事件。
　　 

 

// [Event(name="eventName",type="package.eventType")] 

// name说明了事件的名称，而type表明了该名称对应的事件类型。事件侦听器使用name进行注册。

 

　　为ActionScript组件定义事件

// [Event]元数据必须置于包（package）定义之内，类（class）定义之上
            
             package  events{
                
                [Event(name = " sampleEvent " , type = " myEvents.SampleEvent " )]
                
                 public   class  MyComponent  extends  UIComponent{
                     //
                }
            }

 

　　为MXML组件定义事件

< fx:Metadata >
        [Event(name="SwitchLightEvent", type="CustomTraficLight.events.SwitchLightEvent")]
     </ fx:Metadata >

３.触发事件

４.创建事件侦听器