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

原创 2012年03月27日 17:24:55

显示列表上,对象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)假设你如果不使用上述参数的默认值,那么你一定是对事件机制以及使用该机制有足够的了解,有能力避免事件机制灵活性带来的可能的副作用。

【转】深入浅出Flex组件生命周期Part2 ─ 使用ActionScript3开发移动Spark组件的皮肤类

原文地址:http://www.donglongfei.com/2011/07/actionscript-3-customize-mobile-spark-component-part2/ ...
  • mnorst
  • mnorst
  • 2011年09月01日 11:29
  • 1326

46个Flex和actionscript3开源项目

1. Flexbox http://flexbox.mrinalwadhwa.com/ 这是一位来自印度的flex开发者在07年2月份建立的flex组件库,里面也有不少好东西。 2. Flexlib ...

自定义Flex4+的Spark组件part1:使用ActionScript3开发Spark组件Component类

前言 Flex开发移动应用时,出于性能考虑,需要使用AS3编写组件Skin,而不是使用MXML。实际上,通过使用AS3编写组件皮肤,开发者可以更深入的了解Flex的组件生命周期,无论是对于移动应用开...
  • gsh10zh
  • gsh10zh
  • 2013年12月16日 14:08
  • 713

pure actionscript3 button in flex ,

css: .battlePropButton { upSkin: Embed(source="assets/battle/bat_prop1.png"); overSkin: Embed(so...

[转]深入浅出Flex组件生命周期Part1─ 使用ActionScript3开发Spark组件Component类

前言 Flex开发移动应用时,出于性能考虑,需要使用AS3编写组件Skin,而不是使用MXML。实际上,通过使用AS3编写组件皮肤,开发者可以更深入的了解Flex的组件生命周期,无论是对于移动应用开...
  • mnorst
  • mnorst
  • 2011年09月01日 11:20
  • 1905

flash flex actionScript3 AS3 跨域操作 磁盘 文件

MDM Zinc 3.0 FileSystem-------------à 1.       FileSystem.appendFile()说明:往指定文本后追加内容例如:mdm.FileSystem...

关于ActionScript3中的事件类强制转换失败的问题

错误提示: TypeError: Error #1034: 强制转换类型失败:无法将 flash.events::Event@6169971 转换为 xxxxx。  写这个主要是为了遇...

Flash actionscript3 事件处理

  • 2013年05月03日 14:29
  • 1.39MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ActionScript3(Flex)事件机制的设计技巧: Event / addEventListener
举报原因:
原因补充:

(最多只允许输入30个字)