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,butto

nEnterHandle);//回车键响应

}

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 function

updateDisplayList(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(new

InputButtonCompEvent("buttonClick",textInput.text));

}

//分发按钮回车键提交响应事件

private function

buttonEnterHandle(event:KeyboardEvent):void{

if(event.charCode == 13){

this.dispatchEvent(new

InputButtonCompEvent("buttonClick",textInput.text));

}

}

这一步涉及到自定义组件设计的相关内容，这一方面我们不在此做过多叙述。

在这一步当中，我们做的工作主要是把自定义的组件搭建好，并为其中的子组件设置并注册了监听器。其中的监听器能分发出我们自定义的事件InputButtonCompEvent到事件流中。那么接下来，我们就要设计这个自定义事件的内部细节了。

二、自定义事件的设计

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

所有事件对象都是flash.events.Event或其子类，因此自定义事件类需要继承自Event类：

public class InputButtonCompEvent extends Event {

然后我们的构造函数决定了自定义事件具有的参数列表形式，比如：

public function

InputButtonCompEvent(type:String,eventInfo:Object=null,bubbles :Boolean=false,cancelable:Boolean=false)

{

super(type,bubbles,cancelable);

this.eventInfo = eventInfo;

}

Event类具有三个参数：type，事件类型、

bubbles ，Event 对象是否参与事件流的冒泡阶段。默认值为false、