教你7步实现flex自定义Event及参数传递
?
?
?
Flex应用开发过程中如需要灵活的在不同组件（如A与B，父与子）之间响应事件，传递参数等功能时就会使用自定义事件（Event）机制,下面通过一个事例分七步,通过自定义Event和EventDispatcher两种机制实现事件交互和参数传递;
??????? 事例描述: 有一个父亲“parentApp.mxml”有两个儿子“comBrotherA.mxml”和"comBrotherB.mxml",新年降至，两个儿子为表孝心分别给他们老爸存入(事件)一笔过节费(事件参数),并通知老爸我存钱进去了，老爸在收到两个儿子的钱后汇总后同时告诉(事件)两个儿子钱我已收到总数(事件参数)是多少...
??? 1、第一步：引入自定义注册事件参数传递扩展类(来自网络)
?? view plaincopy to clipboardprint?
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";??
??????? }??
??? }??
}
??? 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、第二步：自定义事件触发类：
view plaincopy to clipboardprint?
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; //主要用于参数传递??
??? }??
}
??? 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、第三步：用户自定义事件类
??? view plaincopy to clipboardprint?
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;//也可通过这样的方式传递参数??
??????????? }??
??????? }??
??? }
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”：
??? view plaincopy to clipboardprint?
<?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>
<?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”：
??? view plaincopy to clipboardprint?
<?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>
<?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":
??? view plaincopy to clipboardprint?
<?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、执行（存入分别“调用父亲方法”，"触发儿子事件"）最终结果:
?
http://blog.csdn.net/xingjunli/article/details/5107483
