flex 事件之理解

isiqi

浏览: 16474617 次
性别:
来自: 济南

最近访客更多访客>>

nison

hellohank

wangyy

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-07 ( 335)
2012-06 ( 252)
2012-05 ( 362)
更多存档...

Flex Flash VB VB.NET Adobe

首先，申明本文是转载 http://blog.csdn.net/ivanmarkliu/archive/2009/07/08/4327570.aspx ，大家可以访问该链接，也可以直接阅读本文后续部分以了解 flex 事件。接下来简单谈下为何要转载此文及本人对此文的一些补充。

可以这样说 flex 是事件驱动的，熟练掌握事件对于提高 flex 开发水平是至关重要的， flex 的经典绑定机制就是基于 event 。网上对于 flex event 的介绍很多，其中不乏官方的 e 文，但是本人觉得本转载之文对于事件的核心“事件传播”讲解的是比较通俗易懂的，且有 demo ，只要运行 demo 即能理解大概。因此本人认为结合此转载篇，再了解下事件派发的一个借口 IEventDispatcher 和基类 EventDispatcher ，再熟悉下自定义 event 便可熟练掌握 flex event 了。

在转载正文之前，先补充事件传播的 3 个阶段值，使大家更易理解。

EventPhase.CAPTURING_PHASE: 1 ，捕获阶段

EventPhase.AT_TARGET: 2 ，目标阶段

EventPhase.BUBBLING_PHASE: 3 ，冒泡阶段

/////////////////////////////////////////////// 转载正文 /////////////////////////////////////////////////

1. 最简单的事件

以下代码：

 


1:

 

xml

 

version

="1.0" 

encoding

="utf-8"?>

 


2:

 

<

mx:Application

 

xmlns:mx

="http://www.adobe.com/2006/mxml"

 


3:

 



layout

="absolute">

 


4:

 



<

mx:Script

>

 


5:

 



[CDATA[

 


6:

 


import flash.events.MouseEvent;

 


7:

 


import mx.controls.Alert;

8:




9:

 


private function btnClick(event:MouseEvent):void {

 


10:

 


Alert.show("Hello Event");

 


12:

 


]]

>

 


13:

 



mx:Script

>

 


14:

 



<

mx:Button

 

x

="311.5"

 


15:

 



y

="215"

 


16:

 



label

="Button"

 


17:

 



click

="btnClick(event)"/>

 


18:

 

mx:Application

>

效果很简单，当单击鼠标时弹出一个提示窗口，内容“Hello Event” 。代码中，button 的click 设定了事件触发的时候执行btnClick 方法中的代码。

其中，event 对象就是这个组件分发的事件对象，即type 为 “click” 的MouseEvent 的一个实例。这个event 对象包含了触发该事件时的各种信息，比如触发事件对象是哪个，监听对象是哪个，触发时鼠标点在哪里等等，不同的event 类会包含不同的属性，比如KeyboardEvent 包含了键盘点击了哪个键。

下面将会解释到，这个事件会在事件流的target 阶段被触发。

2. 事件的传播

在官方的帮助手册里有提到，当事件触发之后，FLEX 有3 个检测事件监听器的阶段, 3 个阶段的发生的顺序如下：

1. 捕获
2. 目标
3. 上浮

在任意一个阶段, 节点们都有机会操作事件。

关于这三个阶段的描述，发现很多网上的版本说不清楚。帮助手册里原文是这样的：

l The first part of the event flow is called the capturing phase. This phase comprises all of the nodes from the root node to the parent of the target node. During this phase, Flash Player examines each node, starting with the root, to see if it has a listener registered to handle the event. If it does, Flash Player sets the appropriate values of the Event object and then calls that listener. Flash Player stops after it reaches the target node's parent and calls any listeners registered on the parent.

l The second part of the event flow, the targeting phase, consists solely of the target node. Flash Player sets the appropriate values on the Event object, checks the target node for registered event listeners, and then calls those listeners. For more information.

l The third part of the event flow, the bubbling phase, comprises all of the nodes from the target node's parent to the root node. Starting with the target node's parent, Flash Player sets the appropriate values on the Event object and then calls event listeners on each of these nodes. Flash Player stops after calling any listeners on the root node.

总结了一下，如下解释：

l 捕获阶段(capture)
在这个阶段，Flash Player 会去查找事件的触发源，它是通过根显示元素(root display object) 逐层向下寻踪，直到找到事件的发起源头的父节点，如你在button 上click 后，Flash Player 找到的事该button 对象。在这个阶段监视器(listener) 默认是不会收到任何消息的( 默认只在target 和bubble 阶段收到消息) 。

l 目标执行阶段(target)
这个阶段会调用事件发起者中的事件监听器。

l 冒泡阶段(bubble)
最后的这个阶段其实就是第一个阶段的逆向过程。它就是在事件代码执行完毕后，从事件发起源头的父节点，通过子元素逐级向父元素发出该事件，一直到根元素。过程中，在节点处添加的listener 会收到消息并且触发。前提是事件支持bubble 阶段。

设置listener 的方法为使用下面的function ：

 


1:

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

l type :Event 的类型，例如click 事件type 就是click 等。

l Listener : 响应事件的方法，即当捕获到事件时你要程序做什么。

l useCapture : 默认为 false 。当设置为true 时，事件会在捕获阶段就触发；设置为false 时，事件则在冒泡阶段触发。因为默认是false ，所以之前提到在捕获阶段，listener 默认是不会收到任何消息的。如果想让事件既在捕获阶段触发又在上浮阶段触发，可以用两次addEventListener ，一次把这个参数设成false ，一次设成true ，分别在这两个阶段触发。

l priority : 优先级。

l useWeakReference : 是否设置为弱引用。如果被设置为true ，则表示告诉Flash Player ，当直接引用这个监听器的对象数量为0 时，就可以马上回收它。默认是false 的话，还需要遍历这个引用可以到达的其它引用，确保不会发生循环引用时才回收资源。

拿本文第一章中的例子改造一下说明这三个阶段以及 addEventListener 的使用：

 


1:

 

xml

 

version

="1.0" 

encoding

="utf-8"?>

 


2:

 

<

mx:Application

 

xmlns:mx

="http://www.adobe.com/2006/mxml"

 


3:

 



layout

="absolute"

 


4:

 



creationComplete

="creationComplete()">

 


5:

 



<

mx:Script

>

 


6:

 



[CDATA[

 


7:

 


import flash.events.MouseEvent;

 


8:

 


import mx.controls.Alert;

9:




10:

 


private function btnClick(event:MouseEvent):void {

 


11:

 


trace(event.eventPhase + ":Button:" + event.currentTarget.id + ":" + event.target.id);

13:




14:

 


private function btnClick2(event:MouseEvent):void {

 


15:

 


trace(event.eventPhase + ":Application:" + event.currentTarget.id + ":" + event.target.id);

17:




18:

 


private function btnClick3(event:MouseEvent):void {

 


19:

 


trace(event.eventPhase + ":VBox:" + event.currentTarget.id + ":" + event.target.id);

21:




22:

 


private function btnClick4(event:MouseEvent):void {

 


23:

 


trace(event.eventPhase + ":AddButton:" + event.currentTarget.id + ":" + event.target.id);

25:




26:

 


private function creationComplete():void {

 


27:

 


addEventListener(MouseEvent.CLICK, btnClick2, false);

 


28:

 


addEventListener(MouseEvent.CLICK, btnClick2, true);

 


29:

 


vb.addEventListener(MouseEvent.CLICK, btnClick3);

 


30:

 


tb.addEventListener(MouseEvent.CLICK, btnClick4);

 


32:

 


]]

>

 


33:

 



mx:Script

>

 


34:

 



<

mx:VBox

 

x

="200"

 


35:

 



y

="147"

 


36:

 



id

="vb"

 


37:

 



height

="100%">

 


38:

 





<

mx:Button

 

id

="tb"

 


39:

 



label

="Button"

 


40:

 



click

="btnClick(event)"/>

 


41:

 



mx:VBox

>

 


42:

 

mx:Application

>

为了解释事件的三个阶段，我把button 再放到一个vbox 里面。在 Application 加入两个listener ，userCapture 分别设置为false 和true ，这样就可以在Application 捕获到捕获阶段和上浮阶段的事件。然后在VBox 设置一个listener ，userCapture 属性使用默认的false ，用于证明上浮阶段的顺序。再在 Button 上设置一个listener ，证明Button 上的listener 没有参与捕获阶段和上浮阶段。

代码中用于检测事件阶段的Event 的eventPhase 属性。这个属性分别用1 、2 、3 表示Capture Phase 、Target Phase 和Bubble Phase 。

还有就是event 的currentTarget 和target 属性。因为在事件流的过程中，event 对象会被动态的在各个层次节点传递。currentTarget 就是当前的节点对象，target 则是事件分配源对象，这个例子里面target 就是button 。

用Debug 跑一下以上代码，然后点击Button ，控制台输出如下：

 


1:

 1:Application:HelloEvent:tb

 


2:

 2:Button:tb:tb

 


3:

 2:AddButton:tb:tb

 


4:

 3:VBox:vb:tb

 


5:

 3:Application:HelloEvent:tb

结果中可以看到上浮的过程是由内而外的，以及可以看到事件发出对象的监听只在target 阶段被执行。

在事件的传播过程中，任何阶段中都可以使用以下两个函数停止事件传播：

 


1:

 stopPropagation()




2:

 stopImmediatePropagation()

这两个函数的共同特征就是，可以阻止事件继续传播到别的节点，而且都不影响对象和事件的关联关系。不同的地方是，stopPropagation() 要等到当前节点所有事件都完成了以后才生效，而stopImmediatePropagation() 会马上生效。

3. 事件的分派

最终继承自EventDispatcher 的对象都会含有 dispatchEvent 这个方法，他有一个参数，事件对象。事实上所有的事件都是通过这个函数分派出去的. 。 dispathEvent(Event) ，我们当然也可以自己定义这个Event ，然后用第二章中的各种方式去捕获自定义的Event ，这个呆会会说到。

先看下面的代码：

 


1:

 

xml

 

version

="1.0" 

encoding

="utf-8"?>

 


2:

 

<

mx:Application

 

xmlns:mx

="http://www.adobe.com/2006/mxml"

 


3:

 



layout

="absolute"

 


4:

 



creationComplete

="creationComplete()">

 


5:

 



<

mx:Script

>

 


6:

 



[CDATA[

 


7:

 


import flash.events.MouseEvent;

 


8:

 


import mx.controls.Alert;

 


9:

 


private function btnClick(event:MouseEvent):void {

 


10:

 


trace("Click:Button:" + event.currentTarget.id + ":" + event.target.id + ":" + event.eventPhase);

 


11:

 


tb.dispatchEvent(new MouseEvent(flash.events.MouseEvent.DOUBLE_CLICK, true));

 


13:

 


private function btnDoubleClick(event:MouseEvent):void {

 


14:

 


trace("DoubleClick:Button:" + event.currentTarget.id + ":" + event.target.id + ":" + event.eventPhase);

 


16:

 


private function doubleClickHandler(event:MouseEvent):void {

 


17:

 


trace("Application:doubleClick");

 


19:

 


private function creationComplete():void {

 


20:

 


addEventListener(flash.events.MouseEvent.DOUBLE_CLICK, doubleClickHandler);

 


22:

 


]]

>

 


23:

 



mx:Script

>

 


24:

 



<

mx:Button

 

x

="311"

 


25:

 



y

="180"

 


26:

 



id

="tb"

 


27:

 



label

="Button"

 


28:

 



click

="btnClick(event)"

 


29:

 



doubleClick

="btnDoubleClick(event)"/>

 


30:

 

mx:Application

>

上面的程序，现在Application 添加一个鼠标双击事件的监听，在 Button 注册一个click 事件。在click 响应的函数里面使用dispatchEvent ，将一个鼠标双击事件由Button 发出。控制台结果如下：

 


1:

 Click:Button:tb:tb:2

 


2:

 DoubleClick:Button:tb:tb:2

 


3:

 Application:doubleClick

可以看到，单击这个Button 的时候Application 捕获到了双击事件。使用这个函数，我们就可以在自定义的控件中分派自定义的事件了。

分享到：

灵活使用控件 | 穷举一切可能的数值排列或组合（应该是类36 ...

2010-05-22 11:09
浏览 866
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论