ActionScript3.0中的事件流(EventFlow)机制
ActionScript3.0的事件流机制只与显示列表相互关联的,所以它的事件流机制只存在于显示模型中,主要用来处理人机交互的!
先来看一个列子,在舞台上有显示容器sprite1,sprite1上又有子容器sprite2,sprite2上又有子容器sprite3,sprite3上又有子容器button,button上又有一个文本。那么当我们单击按钮时实际上是单击的按钮上的文本,但是AS处理的不同的就是它会首先从舞台的第一个容器出发寻找是哪个显示对象发出了事件,一层一层的去找,直到找到,之后就会沿着此对象又向外抛,由于文本是按钮的字对象,所以可以说是按钮接受到了单击,以此类推也可以说是父容器受到了单击。
一、大概了解了它的事件处理我们接下来看看它的事件流机制的3个阶段:1、捕获阶段;2、目标阶段;3、冒泡阶段。
1、捕获阶段:其实说白了就是从根容器一层一层的去找目标容器(即实际的事件发出者)。
2、目标阶段:也就是停留在真正的事件发出者身上。
3、冒泡阶段:就是从目标阶段向父容器一层一层的移动,直到根容器。
二、事件的target和currentTarget属性
target是发出事件的显示对象,一般在最里层;currentTarget当前侦听事件,往往是容器(主要是在冒泡阶段体现,所以就为容器),只有target和currentTarget相同时currentTarget才可能是非容器显示对象。
三、事件侦听时的事件流阶段
事件对象的事件流阶段有eventPhase属性表示:
1、eventPhase=1表示捕获阶段
2、eventPhase=2表示目标阶段
3、eventPhase=3表示冒泡阶段
一般情况下侦听器的调用都是在冒泡阶段实现的。如果当前侦听的事件就是事件的发出对象,则就是在目标阶段实现。如果想在捕获阶段侦听事件,则将addeventListen()第三个参数设置为true即可在捕获阶段侦听了。
列子:
package { import flash.display.Sprite; import flash.events.MouseEvent; /** * 测试事件流机制 * */ [SkinState("width=500,height=300")] public class TestComman extends Sprite { public function TestComman() { var sp1:Sprite = new MyOwnSp( 20 , 20 , 200 , 200 , "sp1" ); var sp2:Sprite = new MyOwnSp( 40 , 40 , 150 , 150 , "sp2" ); var sp3:Sprite = new MyOwnSp( 60 , 60 , 100 , 100 , "sp3" ); this.addChild(sp1); sp1.addChild(sp2); sp2.addChild(sp3); sp1.addEventListener(MouseEvent.CLICK , onClick ,true);//在捕获阶段侦听 sp1.addEventListener(MouseEvent.CLICK , onClick); sp2.addEventListener(MouseEvent.CLICK , onClick); sp2.addEventListener(MouseEvent.CLICK , onClick ,true); sp3.addEventListener(MouseEvent.CLICK , onClick); sp3.addEventListener(MouseEvent.CLICK , onClick ,true); } protected function onClick(event:MouseEvent):void { trace("事件的发出目标: \t" + event.target.name); trace("正在侦听的当前容器: \t" + event.currentTarget.name); trace("事件当前阶段: \t" + event.eventPhase); if(event.target.name == event.currentTarget.name){ trace("事件发出目标 = 事件侦听目标"); } trace("-------------------割一下--------------------"); } } } import flash.display.Sprite; /**创建当前的容器*/ class MyOwnSp extends Sprite{ public function MyOwnSp(x:int , y:int , mywidth:Number , myheight:Number , myname:String){ this.graphics.beginFill(0xffffff * Math.random() );//随机指定一个颜色 this.graphics.drawRect( x , x , mywidth , myheight); this.graphics.endFill(); this.name = myname; } }