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的事件旅程分别为三个阶段：捕获阶段、目标阶段和冒泡阶段。上图是红绿灯例子的执行过程。

当事件发生时，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,true);
				lab.addEventListener(MouseEvent.CLICK,true);
				vbox.addEventListener(MouseEvent.CLICK,true);
				this.addEventListener(MouseEvent.CLICK,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