skip to main |skip to sidebar

2007-04-01

capture与bubbles详解

所有 在DisplayList 上的渲染单位都支持全新的三段式事件播放机制,以 Stage 为起点自上而下的播报事件到 target 对象(此过程称为 Capture Phase),然后播报事件给 target 对象(此过程称为 Target Phase),最后在自下而上的播报事件(此过程称为 Bubbling Phase)。 示意图如下:(点击播放,动画的GIF) 添加方法为: //Target Phase + Bubbling Phase Child.addEventListener(MouseEvent.CLICK, childCleckHandler, false); //Capture Phase Child.addEventListener(MouseEvent.CLICK, childCleckHandler, true); //如果两个都添加的话,就要写两遍(useCapture一次为true,一次为false) Child.addEventListener(MouseEvent.CLICK, childCleckHandler, true); Child.addEventListener(MouseEvent.CLICK, childCleckHandler, false); 一个例子(要在Flex2的debug模式下才能运行):Sample.as
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class Sample extends Sprite {

    public function Sample() {
        //Parent
        with(graphics) {
            lineStyle(1,0x000000);
            beginFill(0x993300)
            moveTo(0,0);
            lineTo(550,0);
            lineTo(550,550);
            lineTo(0,550);
            lineTo(0,0);
            endFill();
        }
        addEventListener(MouseEvent.CLICK, parentCleckHandler,true);
        addEventListener(MouseEvent.CLICK, parentCleckHandler);
        //Self
        var self:Sprite = new Sprite();
        with(self.graphics) {
            lineStyle(1,0x000000);
            beginFill(0x003399)
            moveTo(50,50);
            lineTo(500,50);
            lineTo(500,500);
            lineTo(50,500);
            lineTo(50,50);
            endFill();
        }
        self.addEventListener(MouseEvent.CLICK, selfCleckHandler,true);
        self.addEventListener(MouseEvent.CLICK, selfCleckHandler);
        //Child
        addChild(self)
        var child:Sprite = new Sprite();
        with(child.graphics) {
            lineStyle(1,0x000000);
            beginFill(0x993399)
            moveTo(100,100);
            lineTo(450,100);
            lineTo(450,450);
            lineTo(100,450);
            lineTo(100,100);
            endFill();
        }
        child.addEventListener(MouseEvent.CLICK, childCleckHandler,true);
        child.addEventListener(MouseEvent.CLICK, childCleckHandler);
        self.addChild(child)
    }
    private function parentCleckHandler(event:Event):void {
        trace("Parent clecked!")
    }
    private function selfCleckHandler(event:Event):void {
        trace("\tSelf clecked!")
    }
    private function childCleckHandler(event:Event):void {
        trace("\t\tChild clecked!")
    }
}
}

没有评论: