上一篇主要以代码的方式说明了如何使用自定义事件在父子组件之间传递数据,那么在开发中,我们可能会遇到另一种情况,就是想在任意一个地方监听到任意一个组件中被触发的事件,这样事件处理更灵活,并不局限于父子组件之间,那么下面就说明这种情况如何处理。
Flex中所有的组件都间接继承自EventDispatcher,通过查看Flex API,了解一下这个类中的方法。
如图所见,该类包含了派发事件、监听事件、移出事件等方法,那么通过这个类就可以实现本文开篇所提出的那种情况,分析一下,监听事件的对象和派发事件的对象必须是同一个对象,这样事件才能被捕获,所以我们需要写一个单例的类,并且组合EventDispatcher,可以满足需求。
events/MyEventDispatcher.as,这里同样不建议以My起头命名,只是测试用。
package events { import events.MyEvent; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IEventDispatcher; import mx.core.Singleton; public class MyEventDispatcher { private static var _inst:MyEventDispatcher; private var eventDispatcher:IEventDispatcher; public function MyEventDispatcher(singleton:Singleton) { if(singleton == null) { throw new Error("Create MyEventDispatcher Error!"); } eventDispatcher = new EventDispatcher(); } public static function getInstance():MyEventDispatcher { if (!_inst) { _inst = new MyEventDispatcher(new Singleton); } return _inst; } public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, pririty:int=0, useWeakReference:Boolean=true):void { eventDispatcher.addEventListener(type, listener, useCapture, pririty, useWeakReference); } public function removeEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=true):void { eventDispatcher.removeEventListener(type, listener, useCapture); } public function dispatchEvent(event:MyEvent):Boolean { return eventDispatcher.dispatchEvent(event); } public function hasEventListener(type:String):Boolean { return eventDispatcher.hasEventListener(type); } public function willTrigger(type:String):Boolean { return eventDispatcher.willTrigger(type); } } } class Singleton {}
/** * 派发事件 * @return */ public function dispatch():Boolean { return MyEventDispatcher.getInstance().dispatchEvent(this); }
<?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" minWidth="955" minHeight="600" xmlns:components="components.*"> <s:layout> <s:VerticalLayout/> </s:layout> <components:component1 /> <components:component2 /> </s:Application>components/component1.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationCompleteHandler(event)"> <fx:Script> <![CDATA[ import events.MyEventDispatcher; import events.MyEvent; import mx.events.FlexEvent; protected function creationCompleteHandler(event:FlexEvent):void { MyEventDispatcher.getInstance().addEventListener(MyEvent.SHOWINFO, showInfo); } protected function showInfo(event:MyEvent):void { textArea.text = event.data; } ]]> </fx:Script> <s:TextArea id="textArea" /> </s:Group>components/component2.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import events.MyEvent; import events.MyEventDispatcher; protected function buttonClickHandler(event:MouseEvent):void { var myEvent:MyEvent = new MyEvent(MyEvent.SHOWINFO); myEvent.data = "哈哈"; myEvent.dispatch(); } ]]> </fx:Script> <s:Button label="显示内容" click="buttonClickHandler(event)"/> </s:Group>好,这样就实现了在任意一个地方监听到任意一个组件中被触发的事件的功能,文中如有错误之处,欢迎指出,大家共同进步。