事件之旅

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

 

关于结果的说明：

• 尽管为btnRed注册了两次监听器，但由于只在目标阶段检测该按钮，因此监听器只在目标阶段被调用一次。
• 尽管我们为lab标签也注册了监听器，但由于改对象并不在事件之旅的节点上，因此不会产生任何输出。

 关于flex内置事件的启动过程，请参考Flex应用启动的事件序列这篇文章。