ActionScript3(Flex)事件机制的设计技巧: Event / addEventListener

时间:2021-04-14 23:53:21

显示列表上,对象A发出事件E,那么A以及A的父对象、父父对象。。。都有能力响应该事件。

这就是ActionScript3(Flex)的事件流机制,很灵活,我们可以利用这个机制轻易地完成其他语言很难完成的动作设计。

但是,除非特殊需要,通常我们希望对象A发出的事件不要被预期外的其他事件监听器所响应,以免引起预想外的动作(事件机制的灵活性的代价)。

 

ActionScript3(Flex)事件机制是如何设计成既提供灵活的运用空间,又避免产生隐患呢?

 

我们看下面的代码:

乍一看,显示列表上,App包含gropu1,gropu1包含button1。因此App和gropu1有能力响应button1发出的事件。

 

但是该程序执行结果是:

App和gropu1没有响应button1发出的事件,只有button1自己响应了该事件:弹出信息框,显示文字:“buttonListener”。

<?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" 
			   creationComplete="init(event)">
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			protected function init(event:FlexEvent):void
			{
				this.addEventListener("a",AppListener);
				this.gropu1.addEventListener("a",groupListener);
				this.button1.addEventListener("a",buttonListener);				
			}
			
			protected function click(event:MouseEvent):void
			{
				button1.dispatchEvent(new Event("a"));
			}
			
			private function AppListener(e:Event):void
			{
				Alert.show("AppListener");
			}
			
			private function groupListener(e:Event):void
			{
				Alert.show("groupListener");
			}
			
			private function buttonListener(e:Event):void
			{
				Alert.show("buttonListener");
			}
			
		]]>
	</fx:Script>
	
	<mx:Box id="gropu1" x="78" y="53" width="126" height="111">
		<s:Button id="button1" x="33" y="45" click="click(event)"/>
	</mx:Box>

</s:Application>


为什么会这样呢?

(1)。我们先看Event类的构造函数定义:

public function Event(type:String, bubbles:Boolean = false, cancelable:Boolean = false)

参数

...
bubbles:Boolean (default =false) — 确定 Event 对象是否参与事件流的冒泡阶段。 默认值为 false
...

 

结论1: 参数bubbles的默认值是false,含义是不参加事件流的冒泡阶段。也就是说事件监听器只有捕捉或目标阶段才能响应该事件。

 

 

(2)。我们再看addEventListener()方法的定义:

public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

参数
...

 

useCapture:Boolean (default =false) — 确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapturefalse,则侦听器只在目标或冒泡阶段处理事件。 若要在所有三个阶段都侦听事件,请调用两次addEventListener,一次将useCapture 设置为true,第二次再将useCapture 设置为 false

...

 

结论2: 参数useCapture的默认值是false,含义是侦听器只在目标或冒泡阶段处理事件

 

====================================================================================================

将结论1和结论2整合在一起,得出结论:使用参数默认值的结果是该事件只能在目标阶段能够被监听器响应

Event使用参数默认值被dispatchEvent 该事件只有能在捕捉或目标阶段被监听器响应
addEventListener使用参数默认值 该监听器只能在目标或冒泡阶段响应事件

 

于是ActionScript3(Flex)通过设定参数的默认值,让事件只能在目标阶段被监听器响应,也就是说只有该事件的发出者才能响应该事件,以此来避免事件被预期外的其他监听器响应,造成隐性的问题。

(事件流机制太灵活了,不加约束的滥用会造成意想不到的问题)。

ActionScript3(Flex)假设你如果不使用上述参数的默认值,那么你一定是对事件机制以及使用该机制有足够的了解,有能力避免事件机制灵活性带来的可能的副作用。