事件处理基础知识（二）事件里的currentTarget 和 target的区别?

事件里的currentTarget 和 target的区别?



图1 事件流三个阶段

例如：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init()"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:com="com.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private function init(): void
{
addEventListener(MouseEvent.CLICK, clickHandler);
}
private function clickHandler(event: MouseEvent): void
{
trace("target: " + (event.target as DisplayObject).name +"引起的事件"
+ "\ncurrentTarget: " + (event.currentTarget as DisplayObject).name+"处理事件");
}
]]>
</fx:Script>

<s:Label x="15" y="23" id="lab1" text="target是事件的调用对象(event dispatcher)  " fontSize="16"/>
<s:Label x="15" y="46" id="lab2" text="currentTarget是事件的处理对象(event processor)" fontSize="16"/>
<s:Panel x="11" y="75"  width="250" height="200" id="panel"  click="clickHandler(event)">
<mx:Button id="btn" name="btn" label="按钮1" x="14" y="40"   />
<mx:Button id="btn2" name="btn2" label="按钮2" click="clickHandler(event)"  x="115" y="40"/>
</s:Panel>
</s:Application>

图2 程序运行图

点击第一行文字：

　　target: Label5引起的事件
　　currentTarget: e0处理事件

点击panel空白区：

　　target: Group10引起的事件
　　currentTarget: Panel7处理事件
　　target: Group10引起的事件
　　currentTarget: e0处理事件

点击按钮1：

　　target: btn引起的事件
　　currentTarget: Panel7处理事件
　　target: btn引起的事件
　　currentTarget: e0处理事件

点击按钮2：

　　target: btn2引起的事件
　　currentTarget: btn2处理事件
　　target: btn2引起的事件
　　currentTarget: Panel7处理事件
　　target: btn2引起的事件
　　currentTarget: e0处理事件

总结：在事件流的过程中，目标阶段确定的目标对象由Event中的target属性来记录，冒泡阶段移动的游标则由currentTarget来记录。事件对象冒泡过程中每往上移动一级，就会克隆出一个仅与前副本currentTarget不同的新副本。简单说，target是事件的调用对象(event dispatcher)（谁引发了事件），currentTarget是事件的处理对象(event processor)（事件发生后，谁来处理！）

target 属性
target 属性包含对作为事件目标的对象的引用。在某些情况下，这很简单，例如当麦克风变为活动状态时，事件对象的目标是Microphone 对象。但是，如果目标在显示列表中，则必须考虑显示列表层次结构。例如，如果用户在包括重叠的显示列表对象的某一点输入一个鼠标单击，则 Flash Player 和 AIR 始终会选择距离舞台层次最深的对象作为事件目标。对于复杂的 SWF 文件，特别是那些通常使用更小的子对象来修饰按钮的 SWF 文件，target 属性可能并不常用，因为它通常指向按钮的子对象，而不是按钮。在这些情况下，常见的做法是将事件侦听器添加到按钮并使用 currentTarget 属性，因为该属性指向按钮，而 target 属性可能指向按钮的子对象。

currentTarget 属性
currentTarget 属性包含对当前正在处理事件对象的对象的引用。您并不知道哪个节点当前正在处理您要检查的事件对象，虽然这似乎很奇怪，但请记住，您可以向该事件对象的事件流中的任何显示对象添加侦听器函数，并且可以将侦听器函数放在任何位置。而且，可以将相同的侦听器函数添加到不同的显示对象。随着项目大小和复杂性的增加， currentTarget 属性会变得越来越有用。

实践应用：使用事件捕获和冒泡可以最大程度减少事件处理函数

ActionScript 3.0 中的事件模型引入了事件捕获和事件冒泡的概念。利用事件冒泡可帮助您优化 ActionScript 代码执行时间。您可以在一个对象（而不是多个对象）上注册事件处理函数以提高性能。例如，想象创建这样一种游戏，在该游戏中用户必须以最快的速度单击苹果以将其销毁。该游戏将删除屏幕上各个被击中的苹果并为用户增加分数。要侦听由各个苹果调度的 MouseEvent.CLICK 事件，您可能会编写以下代码：

1 const MAX_NUM:int = 10;
2 var sceneWidth:int = stage.stageWidth;
3 var sceneHeight:int = stage.stageHeight;
4 var currentApple:InteractiveObject;
5 var currentAppleClicked:InteractiveObject;
6 for ( var i:int = 0; i< MAX_NUM; i++ )
7 {
8 currentApple = new Apple();
9 currentApple.x = Math.random()*sceneWidth;
10 currentApple.y = Math.random()*sceneHeight;
11 addChild ( currentApple );
12 // Listen to the MouseEvent.CLICK event
13 currentApple.addEventListener ( MouseEvent.CLICK, onAppleClick );
14 }
15 function onAppleClick ( e:MouseEvent ):void
16 {
17 currentAppleClicked = e.currentTarget as InteractiveObject;
18 currentAppleClicked.removeEventListener(MouseEvent.CLICK, onAppleClick );
19 removeChild ( currentAppleClicked );
20 }

此代码对各个 Apple 实例调用 addEventListener() 方法。此外，它还会在用户单击每个苹果时使用 removeEventListener() 方法删除对应的侦听器。然而， ActionScript 3.0 中的事件模型为某些事件提供了一个捕获和冒泡阶段，允许您侦听来自父InteractiveObject 的这些事件。因此，可以优化以上代码并在最大程度上减少对 addEventListener() 和removeEventListener()方法的调用次数。以下代码使用捕获阶段侦听来自父对象的事件：

1 const MAX_NUM:int = 10;
2 var sceneWidth:int = stage.stageWidth;
3 var sceneHeight:int = stage.stageHeight;
4 var currentApple:InteractiveObject;
5 var currentAppleClicked:InteractiveObject;
6 var container:Sprite = new Sprite();
7 addChild ( container );
8 // Listen to the MouseEvent.CLICK on the apple's parent
9 // Passing true as third parameter catches the event during its capture phase
10 container.addEventListener ( MouseEvent.CLICK, onAppleClick, true );
11 for ( var i:int = 0; i< MAX_NUM; i++ )
12 {
13       currentApple = new Apple();
14       currentApple.x = Math.random()*sceneWidth;
15       currentApple.y = Math.random()*sceneHeight;
16       container.addChild ( currentApple );
17 }
18 function onAppleClick ( e:MouseEvent ):void
19 {
20       currentAppleClicked = e.target as InteractiveObject;
21       container.removeChild ( currentAppleClicked );
22 }