教你7步实现flex自定义Event及参数传递

　　Flex应用开发过程中如需要灵活的在不同组件（如A与B，父与子）之间响应事件，传递参数等功能时就会使用自定义事件（Event）机制,下面通过一个事例分七步,通过自定义Event和EventDispatcher两种机制实现事件交互和参数传递;

        事例描述:　有一个父亲“parentApp.mxml”有两个儿子“comBrotherA.mxml”和"comBrotherB.mxml",新年降至，两个儿子为表孝心分别给他们老爸存入(事件)一笔过节费(事件参数),并通知老爸我存钱进去了，老爸在收到两个儿子的钱后汇总后同时告诉(事件)两个儿子钱我已收到总数(事件参数)是多少...

    1、第一步：引入自定义注册事件参数传递扩展类(来自网络)

   

package myeventhelper
{
//自定义注册事件参数传递扩展类
public class EventArgExtend
{
public function EventArgExtend()
{
}
public static function create(f:Function,...arg):Function //动态参数创建
{
var F:Boolean = false;
var _f:Function = function(e:*,..._arg)
{
_arg = arg;
if(!F)
{
F = true;
_arg.unshift(e);
}
f.apply(null,_arg);
};
return _f;
}
public static function toString():String
{
return "Class JEventDelegate";
}
}
}

    2、第二步：自定义事件触发类：

package myeventhelper
{
import flash.events.EventDispatcher;

import mx.core.UIComponent;
//自定义事件触发类
public class MyEventDispatcher extends EventDispatcher
{
private static var _instance:MyEventDispatcher;
public static const EXEC_PARENT_METHOD:String="ExecParentMethod"; //执行Parent方法
public static function getInstance():MyEventDispatcher
{
if(_instance==null){
_instance=new MyEventDispatcher();
}
return _instance;
}
public var Source:UIComponent; //事件源对象
public var Parsms:Object; //主要用于参数传递
}
}

    3、第三步：用户自定义事件类

   

package myeventhelper
{
import mx.events.FlexEvent;
//用户自定义事件类
public class MyExtendEvent extends FlexEvent
{
public static const EXEC_BROTHER_METHOD:String="ExecBrotherMethod";//执行兄弟方法

public var param:Object;
public function MyExtendEvent(o:Object,type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.param = o;//也可通过这样的方式传递参数
}
}
}

    4、第四步：完成儿子A“comBrotherA.mxml”：

   

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="222" height="170" title="组件A" creationComplete="init()">
<mx:Script>
<!--[CDATA[
import myeventhelper.MyExtendEvent;
import myeventhelper.MyEventDispatcher;
import myeventhelper.EventArgExtend;
private var execParent:MyEventDispatcher; //触发父亲节点事件
function init():void
{
execParent = MyEventDispatcher.getInstance();
}
public function onGetParentTotal(e:MyExtendEvent,...agrs):void
{
//下面两种方法都可以用来传递参数
//this.labTotal.text = String(agrs[0].totalValue);
this.labTotal.text = e.param.toString();
}
public function onParentEvent(event:Event):void
{
execParent.Parsms = txtValue.text;
execParent.Source = this;
execParent.dispatchEvent(new Event(MyEventDispatcher.EXEC_PARENT_METHOD));
}

]]-->
</mx:Script>
<mx:Canvas height="90" width="197">
<mx:TextInput width="92" y="10" x="85" id="txtValue"/>
<mx:Label x="13" y="12" text="存入："/>
<mx:Label x="87" y="56" width="90" id="labTotal"/>
<mx:Label x="5" y="56" text="ParentTotal:"/>
</mx:Canvas>
<mx:ControlBar>
<mx:Button label="调用父方法" id="btnExecParent" click="onParentEvent(event)"/>
</mx:ControlBar>
</mx:Panel>

    5、第五步：完成儿子B“comBrotherB.mxml”：

   

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="222" height="170" title="组件B" creationComplete="init()">
<mx:Script>
<!--[CDATA[
import myeventhelper.MyExtendEvent;
import myeventhelper.MyEventDispatcher;
import myeventhelper.EventArgExtend;

private var execParent:MyEventDispatcher; //触发父亲节点事件
function init():void
{
execParent = MyEventDispatcher.getInstance();
}
public function onGetParentTotal(e:Event,...agrs):void //响应父亲类的触发的事件
{
this.labTotal.text = String(agrs[0].totalValue);
}

public function onParentEvent(event:Event):void //通过自定义事件触发类传递参数
{
execParent.Parsms = txtValue.text;
execParent.Source = this;
execParent.dispatchEvent(new Event(MyEventDispatcher.EXEC_PARENT_METHOD));
}
]]-->
</mx:Script>
<mx:Canvas height="90" width="197">
<mx:TextInput width="92" y="10" x="85" id="txtValue"/>
<mx:Label x="13" y="12" text="存入："/>
<mx:Label x="87" y="56" width="90" id="labTotal"/>
<mx:Label x="5" y="56" text="ParentTotal:"/>
</mx:Canvas>
<mx:ControlBar>
<mx:Button label="调用父方法" id="btnExecParent" click="onParentEvent(event)"/>
</mx:ControlBar>
</mx:Panel>

    6、第六步：完成父亲类"parentApp.mxml":

   

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="323" xmlns:ns1="component.*" creationComplete="init();" width="574">
<mx:Script>
<!--[CDATA[
import myeventhelper.MyExtendEvent;
import myeventhelper.MyEventDispatcher;
import myeventhelper.EventArgExtend;
private var parentDP:MyEventDispatcher;
public var totalValue:Number = 0;
function init():void
{
parentDP = MyEventDispatcher.getInstance();
nodeEvent = new MyExtendEvent(totalValue,MyExtendEvent.EXEC_BROTHER_METHOD);

if(!parentDP.hasEventListener(MyEventDispatcher.EXEC_PARENT_METHOD))
parentDP.addEventListener(MyEventDispatcher.EXEC_PARENT_METHOD,getSonValue);//注册通过自定义事件触发类传递参数

//注册事件时传递参数
addEventListener(MyExtendEvent.EXEC_BROTHER_METHOD,EventArgExtend.create(comA.onGetParentTotal,this));
addEventListener(MyExtendEvent.EXEC_BROTHER_METHOD,EventArgExtend.create(comB.onGetParentTotal,this));
}
function getSonValue(e:Event):void
{
if(parentDP.Source == comA)
{
txtA.text = String(parentDP.Parsms);
}
else
{
txtB.text = String(parentDP.Parsms);
}
}

//将结果返回儿子节点
private var nodeEvent:MyExtendEvent;
function onSumToNode(e:Event):void//触发事件将结果返回儿子节点
{
totalValue = Number(txtA.text) + Number(txtB.text);
txtTotal.text = String(totalValue);
nodeEvent.param = totalValue;
dispatchEvent(nodeEvent);
}
]]-->
</mx:Script>
<mx:Canvas x="0" y="0" width="573" height="323" backgroundColor="#729AAC">
<mx:TextInput x="65" y="219" id="txtA"/>
<mx:TextInput x="65" y="248" id="txtB"/>
<mx:TextInput x="65" y="276" id="txtTotal"/>
<mx:Label x="37" y="222" text="A:"/>
<mx:Label x="37" y="251" text="B:"/>
<mx:Label x="23" y="278" text="Total:"/>
<mx:Button x="244" y="219" label="触发儿子事件" click="onSumToNode(event)"/>
<ns1:comBrotherA x="37" y="10" id="comA" width="247">
</ns1:comBrotherA>
<ns1:comBrotherB x="323" y="10" id="comB">
</ns1:comBrotherB>

</mx:Canvas>

</mx:Application>

    7、执行（存入分别“调用父亲方法”，"触发儿子事件"）最终结果: