flex的事件旅程

信号灯的应用中,为什么在点击按钮后,就会自动调用 myEventHandler方法呢?看官答道:“我们把myEventHandler作为事件侦听器注册到了容器ctnButtons上了!”没错,但 是为什么在容器上注册了侦听器,Flash Player就能够调用myEventHandler方法呢?Flash Player如何发现有这样一个侦听器?如果我们在其他的容器,比如ctnButtons的父容器traficLight上为同样的事件注册了侦听器,会 发生什么?Flash Player维护了一个侦听器队列吗?如果是这样的话,那队列中成员的顺序又如何呢?

其实并没有一个所谓的侦听器队列。但Flash Player确实维护了一个树状列表,即显示列表(详见第7章的7.1.1节“显示列表”(见第126页))。Flash Player创建事件对象,并调度该对象到事件流。事件流就是事件对象在显示列表中的“旅程”。

当事件发生时(比如用户按下了按钮),Flash Player即创建Event对象,事件之旅也由此刻开始了。然而,事件之旅的起源地并不在“此地”,而是从显示列表的根节点 Stage(flash.display.Stage,一个特别的显示对象容器,显示列表的根节点)开始,然后沿着列表逐级向下,直到发生事件的对象。之 后,又按相反的方向逐级向上回到根节点。没错,事件之旅是个往返旅程。而且,需要强调的是,事件旅程并不包括从根节点Stage对象到发生事件的对象之间 的所有节点,而只涉及发生事件的对象本身和它的父容器。比如,信号灯应用中,Flash Player就不会检查lblLightInfo对象,因为它并不是三个按钮对象的父容器。在这段旅程中,Flash Player逐一检查这些对象是否针对发生的事件注册了侦听器,为事件对象赋值,并调用侦听器。

概念上,Flex的事件旅程分为三个阶段:捕获阶段、目标阶段和冒 泡阶段,如下图所示。既然事件之旅同显示列表密切相关,在旅程开始之前,我列出了信号灯应用的树状显示列表以供参考。同时标出了当用户按下“红色”按 钮时事件旅程的三个阶段。

flex的事件旅程

flex的事件旅程分别为三个阶段:捕获阶段、目标阶段和冒泡阶段。上图是红绿灯例子的执行过程。

当事件发生时,FlashPlayer就创建Event对象,事件之旅由此就开始了。然而,事件之旅的起源地并不在“此地”,而是从现实列表的根节点State(flash.display.State,一个特别的现实对象容器,现实列表的根节点)开始,然后沿着列表逐渐向下,直到发生事件的对象。之后,又按相反的方向逐级向上回到根节点。没错,事件之旅是个往返过程。而且,需要强调的是,事件之旅并不包括从根节点State对象发生到发生事件的对象之间的所有节点,而只涉及发生事件的对象本身和它的父容器。在红绿灯的例子中,hbox并不在事件之旅之中。

  1. target和currentTarget

事件对象currentTarget属性的值会在事件流中改变,而target属性则不会变化。通过currentTarget属性获知事件 旅程现在停在了那个节点上。

2. 捕获阶段

事件发生后,FlashPlayer将沿着显示列表,从根节点State开始遍历事件发生对象的所有父对象,这个阶段称为捕获阶段。在红绿灯例子中,FlashPlayer将顺序检测State、SystemManager、Application、vbox、hbox,至此为捕获阶段。

需要指出的是,在默认的情况下,容器们并不在捕获阶段监听事件,红绿灯例子中的监听器实际上是在冒泡阶段被调用的。如果想在捕获阶段调用监听器,需要把useCapture设置为true

3. 目标阶段

目标阶段只涉及一个对象,即发生事件的对象。在目标阶段,事件对象的target和currentTarget对象被赋予相同的值,也就是发生事件的对象。

在红绿灯事件中,如果用户按下了红灯按钮,那么在目标阶段,FlashPlayer只检测btnRed对象。如果在btnRed上添加事件监听,那么在目标阶段系统会调用监听方法。

4. 冒泡阶段

冒泡阶段和捕获阶段设计的节点完全相同,但遍历顺序却恰好相反。在FlashPlayer对发生事件对象检测完毕后,将从其直接父容器开始,沿着显示列表向上,最终返回到State根节点。

在红绿灯实例中,目标阶段结束后,FlashPlayer将依次检测hbox 、vbox、Application、SystemManager、State,此为冒泡阶段,事件之旅也就结束了。

下面我们来写个小程序来测试下红绿灯的事件之旅。

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"> <mx:Script> <![CDATA[ private function init():void{ btnRed.addEventListener(MouseEvent.CLICK,myEventHandler); hbox.addEventListener(MouseEvent.CLICK,myEventHandler); lab.addEventListener(MouseEvent.CLICK,myEventHandler); vbox.addEventListener(MouseEvent.CLICK,myEventHandler); this.addEventListener(MouseEvent.CLICK,myEventHandler); btnRed.addEventListener(MouseEvent.CLICK,myEventHandler,true); hbox.addEventListener(MouseEvent.CLICK,myEventHandler,true); lab.addEventListener(MouseEvent.CLICK,myEventHandler,true); vbox.addEventListener(MouseEvent.CLICK,myEventHandler,true); this.addEventListener(MouseEvent.CLICK,myEventHandler,true); } private function myEventHandler(event:Event):void{ trace(event.currentTarget.toString()+"在事件阶段"+event.eventPhase); } ]]> </mx:Script> <mx:VBox width="100%" height="100%" id="vbox"> <mx:Label text="关闭" id="lab"/> <mx:HBox id="hbox"> <mx:Button label="绿色" id="btnGreen"/> <mx:Button label="红色" id="btnRed"/> <mx:Button label="蓝色" id="btnBlue"/> </mx:HBox> </mx:VBox> </mx:Application>


在init()方法中,我们为btnRed、vbox、hbox、lab、this分两次注册了同一个监听器,第二次我们设置了user_captrue为true

eventPhase标志着当前所处事件旅程的阶段。返回值为unit类型,

捕获阶段EventPhase.CAPTURING_PHASE=1

目标阶段EventPhase.AT_TARGET=2

冒泡阶段EventPhase.BUTTLING_PHASE=3

打印的结果是

index0在事件阶段1
index0.vbox在事件阶段1
index0.vbox.hbox在事件阶段1
index0.vbox.hbox.btnRed在事件阶段2
index0.vbox.hbox在事件阶段3
index0.vbox在事件阶段3
index0在事件阶段3