FLEX:target和currentTarget属性的区别

所有Event对象都有target和currentTarget属性，target属性可引用事件分派对象，currentTarget属性可引用正在被检测事件监听器的当前节点。也就是说target当前你点击组件,currentTarget表示你注册了监听器的组件.

 

在事件将在控件链中向上冒泡，在此过程中target始终不变，currentTarget在每个向上移动的过程中及时改变。

例如当用户点击一个Button控件，很可能事件派发者是Button的内部子组件UITextField，事件向上冒泡过程中target始终为 UITextField不变，但currentTarget会逐步冒泡到Button组件，这时，触发了在Button上监听的Click事件处理函数。

综上，开发人员一般使用event.currentTarget属性，event.target属性很少使用。

测试：

 

Flex代码

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();">   
3. <mx:Script>   
4.    <![CDATA[   
5.     import mx.controls.Alert;   
6.     private function canvasClick(event:MouseEvent):void{   
7.      Alert.show('canvas target:'+event.target.id);   
8.        
9.      Alert.show('canvas currentTarget:'+event.currentTarget.id);   
10.     }   
11.       
12.     private function panelClick(event:MouseEvent):void{   
13.      Alert.show('panel target:'+event.target.id);   
14.        
15.      Alert.show('panel currentTarget:'+event.currentTarget.id);   
16.      //event.stopImmediatePropagation();   
17.     }   
18.        
19.     private function init():void {   
20.      _canvas.addEventListener(MouseEvent.CLICK,canvasClick);   
21.      _panel.addEventListener(MouseEvent.CLICK,panelClick);   
22.     }   
23.    ]]>   
24. </mx:Script>   
25.   
26. <mx:Canvas x="0" y="0" width="100%" height="100%" backgroundColor="#FDFCFC" id="_canvas">   
27.    <mx:Panel x="116" y="64" width="427" height="293" layout="absolute" id="_panel">   
28.     <mx:Button x="188" y="158" label="Button" id="_click"/>   
29.     <!-- image这个组件无法产生click事件   -->   
30.     <mx:Image source="1.png" id="_image" x="125" y="70" width="102" height="47"/>   
31.    </mx:Panel>   
32. </mx:Canvas>   
33.   
34. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();"> <mx:Script>  <![CDATA[   import mx.controls.Alert;   private function canvasClick(event:MouseEvent):void{    Alert.show('canvas target:'+event.target.id);        Alert.show('canvas currentTarget:'+event.currentTarget.id);   }      private function panelClick(event:MouseEvent):void{    Alert.show('panel target:'+event.target.id);        Alert.show('panel currentTarget:'+event.currentTarget.id);    //event.stopImmediatePropagation();   }        private function init():void {    _canvas.addEventListener(MouseEvent.CLICK,canvasClick);    _panel.addEventListener(MouseEvent.CLICK,panelClick);   }  ]]> </mx:Script> <mx:Canvas x="0" y="0" width="100%" height="100%" backgroundColor="#FDFCFC" id="_canvas">  <mx:Panel x="116" y="64" width="427" height="293" layout="absolute" id="_panel">   <mx:Button x="188" y="158" label="Button" id="_click"/>   <!-- image这个组件无法产生click事件  -->   <mx:Image source="1.png" id="_image" x="125" y="70" width="102" height="47"/>  </mx:Panel> </mx:Canvas> </mx:Application>

总结:

(1)button这个组件默认的已经注册了click事件,image没有注册,必须手动注册click事件

(2)只有子组件的事件触发了，才会触发父组件的，否侧不会触发事件(事件的传播性,从 子----> 父)

(3)event.stopImmediatePropagation();这个方法是停止事件向父组件传播的