Flex4.6事件监听机制的测试和总结-图文+源代码

Flex4.6事件监听机制的测试和总结在Flex和Actionscript3中，事件的类型有很多，比如单击的click、鼠标移动的mouseEvent、改变大小等。

开发人员需要注意的是，某个组件如何设置监听、发出事件，以及事件的响应操作。

这种方式被称之为“事件驱动”方式。

事件驱动涉及到的有关概念包括：1、事件对象，即event object。

所有的事件对象都是flash.events.Event或者其子类。

每个事件对象都包含事件类型（type）和事件源（target），便于event listener知道事件的类型以及事件发出者。

事件对象是Event类或者某个子类的实例，不但存储了有关特定事件的信息，还包括便于操作事件对象的方法。

2、事件源，即event dispatchers。

是事件发起的主体，所有的dispatcher都是eventdispatcher或其子类。

3、事件监听器，即event listeners。

它表现为一个函数，当事件发生时，事件源dispatcher通知该监听器去处理特定的事件。

为对象添加监听器的方法是：addEventListener(type, function)。

当指定类型的事件发生时，事件监听器以事件对象eventObject为参数传递给事件响应函数。

同一时刻同一组件可能有多个事件发生，因此这里指定事件类型是非常有必要的。

4、事件流，当一个组件触发事件时，这个事件会沿着一定的顺序流动，每经过一个组件，就会检测这个组件是否注册了该事件类型的监听器，如果注册了，就会响应，并调用事件处理函数。

事件流分为三个阶段：（1）捕获阶段，Flex应用程序从根显示元素（如Application）逐层向下寻找，直到找到事件产生的源头。

（2）目标匹配阶段，在该阶段，Flex应用程序会调用目标对象自身注册的监听程序。

（3）冒泡阶段，在该阶段，从目标节点到根节点，逐层向上检测每个节点是否注册了监听器，相当于捕获阶段的逆过程。

Flex应用程序可以在addEventListener()函数中的第三个参数设置事件获取的阶段，如果为true，则关闭捕获阶段，开启目标匹配和冒泡阶段。

如果要阻断事件流继续流动，可以在监听器的响应函数中添加：event.stopPropagation()；由于Flex设置的监听事件类型比较少，如果需要设置组件的特殊响应事件，或者为自定义组件添加自定义的响应事件，我们需要设计自定义类型的Event对象。

下面我们以一个由button和textInput控件组成的自定义组件InputButtonComp为例，为该组件设置按钮单击时的响应事件。

第一步：设计自定义组件。

（1）新建InputButtonComp.as类文件，继承自BorderContainer容器，并定义自定义组件中需要包含的控件。

public class InputButtonComp extends BorderContainer {private var textInput:TextInput;private var button:Button;private var group:HGroup;（2）在InputButtonComp组件中添加子控件，重写createChildren方法。

//添加子组件，并指定初始状态override protected function createChildren():void{ super.createChildren();if(!group){group = new HGroup();group.percentWidth = 100;group.percentHeight = 100;}if(!textInput){textInput = new TextInput();textInput.percentWidth=75;textInput.percentHeight=100;textInput.editable = true;}if(!button){button = new Button();bel = _btnLabel;button.percentWidth = 25;button.percentHeight = 100;//注册监听器，响应单击事件和键盘进入事件button.addEventListener("click",buttonClickHandle);button.addEventListener(KeyboardEvent.KEY_DOWN,buttonEnterHandle);//回车键响应}addElement(group);group.addElement(textInput);group.addElement(button);}（3）自定义组件样式设置//提交组件的变化override protected function commitProperties():void{ mitProperties();invalidateDisplayList();}//默认宽度和长度override protected function measure():void{super.measure();}override protected functionupdateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{super.updateDisplayList(unscaledWidth,unscaledHeight);//button.move(textInput.width,0);}（4）设置按钮的监听器，我们设置在监听器中能分发出一个自定义的事件InputButtonCompEvent到事件流中，自定义事件的类型是“buttonClick”，传递的参数是我们的输入内容textInput.text。

//分发按钮单击响应事件private function buttonClickHandle(event:Event):void{ this.dispatchEvent(newInputButtonCompEvent("buttonClick",textInput.text));}//分发按钮回车键提交响应事件private functionbuttonEnterHandle(event:KeyboardEvent):void{if(event.charCode == 13){this.dispatchEvent(newInputButtonCompEvent("buttonClick",textInput.text));}}这一步涉及到自定义组件设计的相关内容，这一方面我们不在此做过多叙述。

在这一步当中，我们做的工作主要是把自定义的组件搭建好，并为其中的子组件设置并注册了监听器。

其中的监听器能分发出我们自定义的事件InputButtonCompEvent到事件流中。

那么接下来，我们就要设计这个自定义事件的内部细节了。

二、自定义事件的设计我们需要在InputButtonCompEvent.as文件中创建一个自定义的事件类。

所有事件对象都是flash.events.Event或其子类，因此自定义事件类需要继承自Event类：public class InputButtonCompEvent extends Event {然后我们的构造函数决定了自定义事件具有的参数列表形式，比如：public functionInputButtonCompEvent(type:String,eventInfo:Object=null,bubbles :Boolean=false,cancelable:Boolean=false){super(type,bubbles,cancelable);this.eventInfo = eventInfo;}Event类具有三个参数：type，事件类型、bubbles ，Event 对象是否参与事件流的冒泡阶段。

默认值为false、cancelable，确定是否可以取消Event 对象。

默认值为false。

我们在此基础上添加了一个参数eventInfo:Object，用于事件之间的参数传递，并定义该参数的获取和赋值方法：public function get eventInfo():Object{return _eventInfo;}public function set eventInfo(value:Object):void{_eventInfo = value;}三、初步测试到这里，我们的自定义组件和它的自定义响应事件已经建立起来了，也许此时你兴致勃勃的打算欣赏自己的杰作，于是你把自定义组件项目生成的库文件InputButtonComponent.swc拷贝到你的项目中的libs目录下，在设计模式下从自定义组件中找到我们的组件InputButtonComp，拖入我们的工作界面，大概是这么个样子：一切正常吧，你很满意。

然后设置组件的buttonClick事件响应函数：这是开始出现问题了，在Flex-Builder编辑器底端提示错误：这里为什么出错了呢？回想一下在设置自定义事件的buttonClick类型时，我们只是在分发自定义事件到事件流时，定义了事件类型为buttonClick：//分发按钮单击响应事件private function buttonClickHandle(event:Event):void{ this.dispatchEvent(newInputButtonCompEvent("buttonClick",textInput.text));}但是系统怎么识别这个类型呢？换句话说，自定义组件是怎么知道这个是它要去响应的事件呢？四、修改测试Flex中专门为事件定义了一个[Event]元标签，用来申明被自定义组件分派的事件。

这就需要我们在自定义组件的时候，要对这个事件类型及其对应的事件进行申明：.....}事件类型申明放在package申明的后面，类的前面：package componentsBorderContainer { .....}}上述的标签[Event]属于元数据标签，在代码中的作用是向编译器提供如何编译程序的信息，而不会被编译到生成的swf/swc文件中。

为元数据标签定义的name属于自定义组件的事件属性名，在自定义组件中使用name可获取类型为type的自定义事件，并在应用程序中设置其处理函数。

这个时候错误消失了，整个环节都已经搭建好。