Flex事件机制(三)

上一篇主要以代码的方式说明了如何使用自定义事件在父子组件之间传递数据,那么在开发中,我们可能会遇到另一种情况,就是想在任意一个地方监听到任意一个组件中被触发的事件,这样事件处理更灵活,并不局限于父子组件之间,那么下面就说明这种情况如何处理。

       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 {}

       为了节省空间,类里不加注释了,其实也不要紧,功能很简单,组合了EventDispatcher对象,对其做了一层代理,并且对MyEventDispatcher单例话,为什么采用单例上面已经说过了,但是为什么使用组合而不是继承呢,在OOPS(面向对象程序设计系统)中,有一条原则是优先使用组合而非继承,组合比继承更灵活,组合允许在运行期间通过设置类的属性来改变类的行为,并且可以使用接口来组合一个类,提供了更高的灵活性。

       到目前为止,我们的工作已经完成一大半了,在上一篇中设计了一个自定义事件类,也就是events/MyEvent.as,我们可以在该类中加入一个dispatch方法,创建完事件之后可以派发,代码如下:       

/**
 * 派发事件
 * @return 
 */
public function dispatch():Boolean
{
  return MyEventDispatcher.getInstance().dispatchEvent(this);
}

       这样,创建完自定义事件之后,就可以直接派发事件了,那么使用起来就很方便了,下面是具体使用代码,一个应用中有两个自定义组件,组件一中有个TextArea,组件二中有个按钮,点击按钮,将数据传递到TextArea中。

       EventTest.mxml

<?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>

       好,这样就实现了在任意一个地方监听到任意一个组件中被触发的事件的功能,文中如有错误之处,欢迎指出,大家共同进步。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

重学javascript 红皮高程(3)

继续啊,继续JS基础知识补全之路。 昨天说到JS的几种数据类型,像我这种脑子不太好使,记不清JS共有几种对象的人,可以这么记,JS这东西根本不支持自定义类型,所...

1969
来自专栏小詹同学

python | 关于多重继承那些事

继承是面向对象编程的一个重要的方式 ,通过继承 ,子类就可以扩展父类的功能 。和 c++ 一样 ,在 python 中一个类能继承自不止一个父类 ,这叫做 py...

661
来自专栏恰同学骚年

《C#图解教程》读书笔记之二:存储、类型和变量

  (1)C程序是一组函数和数据类型,C++程序是一组函数和类,而C#程序是一组类型声明;

653
来自专栏HTML5学堂

原生JS | 逻辑操作符的短路问题

HTML5学堂-码匠:短路,并不仅仅存在于物理学当中,JavaScript中的逻辑操作符也有短路问题,这个问题时常作为前端的考点出现哦! 面试真题 var a ...

3535
来自专栏一“技”之长

Java开发GUI之可编辑区域 原

    Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea,这两个组件都是继承自TextComponent类。

602
来自专栏腾讯NEXT学位

一看就晕的React事件机制

5168
来自专栏大数据钻研

JavaScript面向对象程序设计—创建对象的模式

JS本身为我们提供了Array、Date、Math等不少对象(见《浅析JavaScript的对象系统》),但在实际开发中我们使用最多的还是自定义对象。自定义对...

3196
来自专栏Micro_awake web

JavaScript中创建对象的几种模式

830
来自专栏计算机编程

关于RxJS 自定义封装Rxbus的使用规范文档

2.3、声明isInner为true的情况: 主要是在push页面之前,即进入子页面:

1172
来自专栏james大数据架构

Android中TextView

TextView:展示文本内容控件 要点: 1.android:textSize="20sp",设置字体的大小使用sp作单位 2.设置宽度高度等属性使用dp(d...

1825

扫码关注云+社区