事件里的currentTarget 和 target的区别?
图1 事件流三个阶段
例如:
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 creationComplete="init()" 5 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:com="com.*"> 6 <s:layout> 7 <s:BasicLayout/> 8 </s:layout> 9 <fx:Declarations> 10 <!-- 将非可视元素(例如服务、值对象)放在此处 --> 11 </fx:Declarations> 12 <fx:Script> 13 <![CDATA[ 14 import mx.collections.ArrayCollection; 15 import mx.controls.Alert; 16 private function init(): void 17 { 18 addEventListener(MouseEvent.CLICK, clickHandler); 19 } 20 private function clickHandler(event: MouseEvent): void 21 { 22 trace("target: " + (event.target as DisplayObject).name +"引起的事件" 23 + "\ncurrentTarget: " + (event.currentTarget as DisplayObject).name+"处理事件"); 24 } 25 ]]> 26 </fx:Script> 27 28 29 <s:Label x="15" y="23" id="lab1" text="target是事件的调用对象(event dispatcher) " fontSize="16"/> 30 <s:Label x="15" y="46" id="lab2" text="currentTarget是事件的处理对象(event processor)" fontSize="16"/> 31 <s:Panel x="11" y="75" width="250" height="200" id="panel" click="clickHandler(event)"> 32 <mx:Button id="btn" name="btn" label="按钮1" x="14" y="40" /> 33 <mx:Button id="btn2" name="btn2" label="按钮2" click="clickHandler(event)" x="115" y="40"/> 34 </s:Panel> 35 </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 }