AS3中的事件冒泡和捕获阶段可以通过以下代码示例来解释:
// 创建一个父容器
var parentContainer:Sprite = new Sprite();
parentContainer.name = "parentContainer";
parentContainer.addEventListener(MouseEvent.CLICK, clickHandler, true); // true 表示在捕获阶段监听事件
// 创建一个子容器
var childContainer:Sprite = new Sprite();
childContainer.name = "childContainer";
childContainer.addEventListener(MouseEvent.CLICK, clickHandler, false); // false 表示在冒泡阶段监听事件
// 将子容器添加到父容器中
parentContainer.addChild(childContainer);
addChild(parentContainer);
function clickHandler(event:MouseEvent):void {
trace("当前目标:" + event.target.name);
trace("当前阶段:" + (event.eventPhase === EventPhase.CAPTURING_PHASE ? "捕获阶段" : "冒泡阶段"));
}
在上面的代码中,我们创建了一个父容器和一个子容器,并给它们分别添加了点击事件监听器。父容器在捕获阶段监听事件,子容器在冒泡阶段监听事件。
当我们点击子容器时,事件将首先进入捕获阶段,然后再进入冒泡阶段。在每个阶段的事件处理函数中,我们通过event.target
来获取当前目标对象的名称,并通过event.eventPhase
来判断当前是在捕获阶段还是冒泡阶段。
执行上述代码后,可以在输出面板中看到类似以下的输出:
当前目标:childContainer
当前阶段:捕获阶段
当前目标:childContainer
当前阶段:冒泡阶段
这说明事件首先在捕获阶段被父容器捕获,然后在冒泡阶段被子容器冒泡。