自定义事件、组件总结

在平常的应用中自定义事件和自定义组件是非常重要的，下面分别介绍它们的应用。

自定义事件分为两种情况：

１继续自Event事件

２直接用Event事件的临时常量

自定义组件也分为两种：

１mxml形式

2 as形式

这两种形式都可以继续自现有有组件，也可以不继续原有组件，完全重新定义。

这里先说自定义组件，在自定义组件的创建过程中，会涉及到自定义事件。所以，我们用两种不同的自定义事件方式来实现自定义组件。

自定义事件时，事件对象的构造函数中的参数bubbles的值，一般为false，这样事件就不会流经冒泡阶段，Event的bubbles为false，MouseEvent的bubbles值为true;

如果想监听这个事件的对象已经添加到了显示列表中，那么它添加监听时 addEventListener的参数useCapture默认是false----监听目标阶段和冒泡阶段，并且事件对象的bubbles值也为false----事件不流经冒泡阶段，那么这个事件只会被它的目标阶段监听到。

如果事件目标不在显示列表中，则 Flash Player 或 AIR 将事件对象直接调度到事件目标。例如，Flash Player 将progress 事件对象直接调度到 URLStream 对象。但是，如果事件目标在显示列表中，则 Flash Player 将事件对象调度到显示列表，事件对象将在显示列表中穿行，直到到达事件目标。

目标：指的是发送事件的对象。发送者就是目标，目标就是发送者。

当前目标：是指事件在事件流中现处流经的位置。

一下面是自定义事件为继承自Event的源码：

有两个自定义组件分别是AS形式―Custom和MXML形式－MyButton

在看自定义组件之前先看一下Event标签的作用：

Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后，你就可以在MXML标签中添加事件处理函数来初始化该自定义类。

Custom ButtonLabel class using[Event]

package comps

{

?importmx.controls.Button;

?importflash.events.Event;

?// Define thecustom event

?[Event(name="labelChanged",type="flash.events.Event")]

?publicclassButtonLabel extends Button

?{

? // property tohold labelvalue

? privatevar_myLabel:String;

? // public settermethod

? public functionsetmyLabel(s:String):void

? {

?? _myLabel =s;

?? this.label =s;

?? // Createanddispatch custom event

??vareventObj:Event = new Event("labelChanged");

??dispatchEvent(eventObj);

? }?

?}

}

Using the ButtonLabel class withthe labelChanged [Event]

?

?<fx:Script>

?<![CDATA[

? importmx.controls.Alert;

?importflash.events.Event;

? // method tohandle customevent

? publicfunctionlabelChanged(eventObj:Event):void

? {

??myTA.text=myTA.text + "n"+ eventObj.target.label;

??myTA.verticalScrollPosition= myTA.verticalScrollPosition +20;

? }

?]]>

?</fx:Script>

?<mx:Paneltitle="Event Sample"width="500" height="275"

?paddingTop="10"paddingLeft="10"paddingRight="10" paddingBottom="10"layout="absolute">?

?<mx:TextInputid="buttonLabelTI"

??change="myButton.myLabel=buttonLabelTI.text"x="10"y="9"/>

?<!--Instantiatecustom class and define method to handle label-Changedevent-->

?<comps:ButtonLabelid="myButton"labelChanged="labelChanged(event);"x="10"y="39"/>

?<mx:TextAreaid="myTA" width="200"height="200" x="249"y="10"/>

?</mx:Panel>

?

下面是源码：

MyEvent事件:

package event

{

???????? importflash.events.Event;

????????

???????? public classMyEvent extends Event

???????? {

?????????????????? public static constEVENT_TEST:String="EventTest";

??????????????????

?????????????????? public functionMyEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)

?????????????????? {

??????????????????????????? super(type,bubbles,cancelable);

?????????????????? }

???????? }

}

MyButton组件:

<?xmlversion="1.0" encoding="utf-8"?>

<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"

?????????????????? ? xmlns:s="library://ns.adobe.com/flex/spark"

?????????????????? ? xmlns:mx="library://ns.adobe.com/flex/halo"

?????????????????? ? click="dispatchEvent(newMyEvent(MyEvent.EVENT_TEST));">

???????? <fx:Script>

?????????????????? <![CDATA[

??????????????????????????? importevent.MyEvent;

?????????????????? ]]>

???????? </fx:Script>

???????? <fx:Metadata>

?????????????????? <!--在Metadata标签下定义Event编译期间检查，为这个自定义组件注册事件-->

?????????????????? [Event(name ="EventTest",type ="event.MyEvent")]

???????? </fx:Metadata>

</s:Button>

?

CustomEvent事件:

package

{

???????? importflash.events.Event;

????????

???????? public classCustomEvent extends Event

???????? {

?????????????????? public static constEVENT_NAME:String= "event_name";

?????????????????? public vardata:Object;

???????????????? public functionCustomEvent(type:String,cancelable:Boolean=false,data:Object=null)? //如果想在冒泡阶段捕获这个事件，bubbles值应该为true

?????????????????? {

??????????????????????????? super(type,cancelable);

??????????????????????????? this.data=data;

?????????????????? }

?????????????????? override public functionclone():Event

?????????????????? {

??????????????????????????? return newCustomEvent(type,cancelable,data);

?????????????????? }

???????? ?}

}

?

Custom组件:

package

{

???????? importflash.events.EventDispatcher;

???????? importmx.containers.Canvas;

???????? importmx.core.UIComponent;

???????? [Event(name="changeTest",type="flash.events.Event")]

???????? public class Customextends Canvas

???????? {

?????????????????? public varName:String = null;

?????????????????? public functionCustom()

?????????????????? {

?????????????????? }

?????????????????? public functionprintEvent(e:CustomEvent):void

?????????????????? {

??????????????????????????? trace(Name+"收到");

?????????????????? }

???????? }

}

?主程序：

<?xmlversion="1.0" encoding="utf-8"?>

<s:WindowedApplicationxmlns:fx="http://ns.adobe.com/mxml/2009"

?????????????????????????????????????????????? ?? xmlns:s="library://ns.adobe.com/flex/spark"

?????????????????????????????????????????????? ?? xmlns:mx="library://ns.adobe.com/flex/mx"

?????????????????????????????????????????????? ?? xmlns:my="button.*"

?????????????????????????????????????????????? ?? xmlns:event="event.*"

?????????????????????????????????????????????? ?? >

???????? <fx:Declarations>

?????????????????? <!-- 将非可视元素（例如服务、值对象）放在此处 -->

???????? </fx:Declarations>??????

???????? <fx:Script>

?????????????????? <![CDATA[

??????????????????????????? importevent.MyEvent;

???????????????????????????

??????????????????????????? importmx.core.UIComponent;

??????????????????????????? //实验１　　将自定义组件添加到显示列表中

??????????????????????????? public varcustom1:Custom = new Custom();

??????????????????????????? public varcustom2:Custom = new Custom();

??????????????????????????? public var ce:CustomEvent= new CustomEvent(CustomEvent.EVENT_NAME);

??????????????????????????? protected functionstartTimer(event:MouseEvent):void

??????????????????????????? {???????????????????????????????????

???????????????????????????????????? ?custom1.Name = "com1";

???????????????????????????????????? custom2.Name= "com2";

???????????????????????????????????? this.addElement(custom1);

???????????????????????????????????? this.addElement(custom2);

????????????????????????????????????

???????????????????????????????????? this.addEventListener(CustomEvent.EVENT_NAME,handleEventAS,true);

???????????????????????????????????? this.parent.addEventListener(CustomEvent.EVENT_NAME,true);

???????????????????????????????????? custom1.addEventListener(CustomEvent.EVENT_NAME,custom1.printEvent,false);

???????????????????????????????????? custom2.addEventListener(CustomEvent.EVENT_NAME,custom2.printEvent,false);

//?????????????????????????????????? custom1.addEventListener("changeTest",handleEventAS);

???????????????????????????????????? custom1.dispatchEvent(ce);

//?????????????????????????????????? this.dispatchEvent(newEvent("changeTest"));

??????????????????????????? }

??????????????????????????? public functionhandleEventAS(e:CustomEvent):void

??????????????????????????? {

???????????????????????????????????? trace(e.currentTarget);

??????????????????????????? }

??????????????????????????? public functionhandleEvent(e:MyEvent):void

??????????????????????????? {

???????????????????????????????????? trace(e.target);

??????????????????????????? }??????????????????????????

?????????????????? ]]>

???????? </fx:Script>????????

???????? <fx:Declarations>

?????????????????? <!-- 将非可视元素（例如服务、值对象）放在此处 -->

???????? </fx:Declarations>

???????? <s:HGroup id="groupTimer">

?????????????????? <s:Button id="start"label="开始"click="startTimer(event)"/>

?????????????????? <s:TextInputtext="" id="txt"/>

???????? </s:HGroup>

???????? <s:Group id="group2">

?????????????????? <my:MyButton id="my1"EventTest="handleEvent(event)" x="208" y="213"></my:MyButton>

?????????????????? <my:MyButton id="my2"EventTest="handleEvent(event)" x="209" y="258"></my:MyButton>

???????? </s:Group>

</s:WindowedApplication>

二发送事件还有另一种方式

custom1.dispatchEvent(new Event("changeTest",false));

直接发送Event对象，可以用第二个参数bubbles的值来控制是否流经冒泡阶段，Event默认是false不流经。它的用法与继承Event的事件用法一样。需要注意的地方就是：如果目标不在显示列表中，事件将会被直接发送给目标，也就是自己。

如果目标在显示列表中，那么事件会在事件流中流动。

protected functionstartTimer(event:MouseEvent):void

{???????????????????????????????????

custom1.Name = "com1";

this.addElement(custom1);

custom1.addEventListener("changeTest",ChangeTest);

this.addEventListener("changeTest",ChangeTest,true);

this.addEventListener("changeTest",ChangeTest);

custom1.dispatchEvent(new Event("changeTest",false));

custom1.dispatchEvent(new Event("changeTest",true));

}

public function ChangeTest(e:Event):void

{

???????? trace(e.eventPhase);

}???????????????