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属性很少使用。

测试：

<?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();这个方法是停止事件向父组件传播的

FLEX:target和currentTarget属性的区别相关推荐

js中的target与currentTarget的区别转
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
[vue] 在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？
[vue] 在vue事件中传入$event,使用e.target和e.currentTarget有什么区别? event.currentTarget指向事件所绑定的元素,而event.target始终 ...
target和currentTarget的区别
target 和currentTarget 都是对一个触发事件的对象的引用. 不同之处在于: 1,target 是对触发事件的对象的引用 (简称就是事件源,就是那个真实DOM本身) 2,current ...
js中Event 对象 target 与 currentTarget的应用
http://www.cnblogs.com/meng1314-shuai/p/7455575.html Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠 ...
Dom属性和HTML属性的区别
w 遇到这个问题的可以先参考这一篇文章,能帮你很好的理解DOM和HTML两种属性的区别之处:https://blog.csdn.net/u014291497/article/details/50639 ...
Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
细说HTML元素的ID和Name属性的区别
细说HTML元素的ID和Name属性的区别可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的 ...
css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
转：Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...

FLEX:target和currentTarget属性的区别

FLEX:target和currentTarget属性的区别相关推荐

最新文章

热门文章