随意地方监听同一事件 _Web前端

任意地方监听同一事件

基本原理：使用同一个事件调度类。调度类可以扩展EventDispatcher，或者直接使用EventDispatcher，或者实现IEventDispatcher。

在flex中中新建一个EventDispatcher对象作为共享对象，用它抛出事件对象，然后在任意需要监听这个事件对象的取得这个共享的EventDispatcher，并添加监听处理函数或方法。

例子1：使用同一父亲的EventDispatcher。EventDispatcher是 DisplayObject 类的基类。

test.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
??????? xmlns:s="library://ns.adobe.com/flex/spark"
??????? xmlns:mx="library://ns.adobe.com/flex/mx"? xmlns:c="customer.*">
?<fx:Script>
??<![CDATA[
???import mx.events.FlexEvent;
???import customer.CustomEvent;

??]]>
?</fx:Script>
?<s:Group>
??
<s:layout>
?<s:HorizontalLayout />
</s:layout>
?<c:CustomCanvas2 id="main"? height="108" width="168"/>
?<c:CustomCanvas1 id="two"? height="108"/>
?</s:Group>
</s:WindowedApplication>

CustomCanvas2

<?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" width="400" height="300">
?<s:layout>
??<s:BasicLayout/>
?</s:layout>
?<fx:Declarations>
??
?</fx:Declarations>
?<mx:Canvas width="160" height="100" backgroundColor="#E5E4E4">
??<fx:Script>
???<![CDATA[
???private function clickHandler(event:MouseEvent):void{
???var custom:CustomEvent=new CustomEvent(CustomEvent.EVENT_NAME);
???//custom.data is Object;//发送事件同时，可以传值(可传可不传)
???custom.data=mytxt.text;
???this.parent.dispatchEvent(custom);
???}
???]]>
??</fx:Script>
??<mx:TextInput id="mytxt" text="CustomEvent Data" width="140" x="10" y="10"/>
??<mx:Button click="clickHandler(event);" label="Send CustomEvent" x="10" y="40"/>
?</mx:Canvas>
</s:Group>

CustomCanvas1

<?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" width="400" height="300" creationComplete="init();">
?<s:layout>
??<s:BasicLayout/>
?</s:layout>
?<fx:Declarations>
??
?</fx:Declarations>
?<mx:Canvas? width="150" height="100" backgroundColor="#E5E4E4">
??<fx:Script>
???<![CDATA[
???import mx.controls.Alert;
???private function init():void{
???this.parent.addEventListener(CustomEvent.EVENT_NAME,clickHandler);
???}
???private function clickHandler(event:CustomEvent):void{
???trace("I get it !");
???mylb.text=event.data.toString();
???Alert.show(event.toString()+"\n"+event.data.toString())
???}
???]]>
??</fx:Script>
??<mx:TextArea id="mylb" x="10" y="10" width="130" height="80"/>
?</mx:Canvas>
</s:Group>

方法2：

test.mxml

同上

CustomCanvas1

<?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" width="400" height="300" creationComplete="init();">
?<s:layout>
??<s:BasicLayout/>
?</s:layout>
?<fx:Declarations>
??
?</fx:Declarations>
?<mx:Canvas? width="150" height="100" backgroundColor="#E5E4E4">
??<fx:Script>
???<![CDATA[
???import mx.controls.Alert;
???private function init():void{
???CustomEvent.dispatcher.addEventListener(CustomEvent.EVENT_NAME,clickHandler);
???}
???private function clickHandler(event:CustomEvent):void{
???trace("I get it !");
???mylb.text=event.data.toString();
???Alert.show(event.toString()+"\n"+event.data.toString())
???}
???]]>
??</fx:Script>
??<mx:TextArea id="mylb" x="10" y="10" width="130" height="80"/>
?</mx:Canvas>
</s:Group>

CustomCanvas2

<?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" width="400" height="300">
?<s:layout>
??<s:BasicLayout/>
?</s:layout>
?<fx:Declarations>
??
?</fx:Declarations>
?<mx:Canvas width="160" height="100" backgroundColor="#E5E4E4">
??<fx:Script>
???<![CDATA[
???private function clickHandler(event:MouseEvent):void{
???var custom:CustomEvent=new CustomEvent(CustomEvent.EVENT_NAME);
???//custom.data is Object;//发送事件同时，可以传值(可传可不传)
???custom.data=mytxt.text;
???CustomEvent.dispatcher.dispatchEvent(custom);
???}
???]]>
??</fx:Script>
??<mx:TextInput id="mytxt" text="CustomEvent Data" width="140" x="10" y="10"/>
??<mx:Button click="clickHandler(event);" label="Send CustomEvent" x="10" y="40"/>
?</mx:Canvas>
</s:Group>

CustomEvent.as

package customer
{
?import flash.events.Event;
?import flash.events.EventDispatcher;
?public class CustomEvent extends Event
?{
??public static const EVENT_NAME:String="event_name";
??
??public static const dispatcher:EventDispatcher=new EventDispatcher();
??public var data:Object;
??
??public function CustomEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, data:Object=null)
??{
???super(type, bubbles, cancelable);
???this.data=data;
??}
??override public function clone():Event{
???return new CustomEvent(type, bubbles, cancelable, data);
??}
?}
}