flex的事件旅程分别为三个阶段:捕获阶段、目标阶段和冒泡阶段。下图是红绿灯例子的执行过程。
当事件发生时,FlashPlayer就创建Event对象,事件之旅由此就开始了。然而,事件之旅的起源地并不在“此地”,而是从现实列表的根节点State(flash.display.State,一个特别的现实对象容器,现实列表的根节点)开始,然后沿着列表逐渐向下,直到发生事件的对象。之后,又按相反的方向逐级向上回到根节点。没错,事件之旅是个往返过程。而且,需要强调的是,事件之旅并不包括从根节点State对象发生到发生事件的对象之间的所有节点,而只涉及发生事件的对象本身和它的父容器。在红绿灯的例子中,hbox并不在事件之旅之中。
- 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应用启动的事件序列这篇文章。