`
solomongg
  • 浏览: 51583 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

target和currentTarget属性比较

    博客分类:
  • flex
阅读更多

所有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>  
 

总结:

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

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

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

分享到:
评论

相关推荐

    as3事件属性

    深入了解as3事件流,阐明target和currentTarget属性的区别与应用

    微信小程序中target和currentTarget的区别小结

    currentTarget和target都是组件的一些属性值集合,由“data-属性名”定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),...

    js中innerText/textContent和innerHTML与target和currentTarget的区别

    今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

    微信小程序事件对象中e.target和e.currentTarget的区别详解

    在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别。 首先上代码: wxml部分: 父组件 子组件 wxss部分: #tar-father{ width: ...

    HTML5自定义属性的问题分析

    后来发现e对象有currentTarget和target属性,而dataset就在currentTarget中,所以通过e.currentTarget.dataset.id取到了正确的值。 另外data-id="1"最好不要用驼峰命名如:data-Id="1" ,这样有时候也取不到值。 ...

    简单了解微信小程序 e.target与e.currentTarget的不同

    在小程序的点击事件中,我们经常使用这...target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上代码: outer view middle view inner view tap1: function

    event.currentTarget和document.activeElement用法

    firefox 的 event.currentTarget 和 ie 的 document.activeElement 这两个完全含义不一致的对象却被捆绑在一起做成了浏览器兼容代码。 大家在google搜索的时候 都会发现 document.activeElement || event....

    为非IE浏览器添加mouseenter,mouseleave事件的实现代码

    先了解几个事件对象属性target 指事件源对象,点击嵌套元素最里层的某元素,该元素就是target。IE6/7/8对应的是srcElement。currentTarget 指添加事件handler的元素本身,如el.addEventListener中el就是...

    vue 的点击事件获取当前点击的元素方法

    首先 vue的点击事件 是用 @...// e.currentTarget 是你绑定事件的元素 } }, 以上这篇vue 的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    jquery1.11.0手册

    :target1.9+ 内容 :contains(text) :empty :has(selector) :parent 可见性 :hidden :visible 属性 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] ...

Global site tag (gtag.js) - Google Analytics