教你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、执行（存入分别“调用父亲方法”，"触发儿子事件"）最终结果: