`
solomongg
  • 浏览: 52776 次
  • 性别: 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();这个方法是停止事件向父组件传播的

分享到:
评论

相关推荐

    Javascript中, event 的 target 与 currentTarget 的区别

    又或者,如果你想根据触发事件的元素进行不同的操作,可以比较`target`和`currentTarget`,以便区分是直接在监听器元素上触发的事件还是从子元素冒泡过来的事件。 在实际开发中,`event.target`常用于对触发事件的...

    JS target与currentTarget区别说明

    在JavaScript中,处理事件时,`target` 和 `currentTarget` 是两个非常重要的属性,它们在事件流的不同阶段有着不同的作用。理解这两个属性的区别对于编写高效且精确的事件处理程序至关重要。 首先,让我们来深入...

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

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

    as3事件属性

    本文将深入探讨AS3事件流中的两个关键属性——`target`与`currentTarget`,并通过具体的示例来阐述它们的区别及实际应用。 #### 二、事件流基础 在AS3中,事件流主要分为三个阶段:捕获阶段(CAPTURING PHASE)、...

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

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

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

    事件对象中的target属性和currentTarget属性是开发者经常需要区分的两个概念,它们在事件处理函数中用于区分事件发生的源头和事件绑定的目标元素。 首先,微信小程序中的事件对象,可以简称为e,在事件处理函数中被...

    event.currentTarget与event.target的区别介绍

    在JavaScript的事件处理中,`event.currentTarget` 和 `event.target` 是两个非常重要的属性,它们在处理DOM元素上的事件时起到关键作用。本文将详细解释这两个属性的区别,并通过实际的测试代码来帮助理解。 首先...

    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

    javascript currentTarget对象介绍

    JavaScript 中的 currentTarget 对象是 Event 对象的一个属性,它始终指向当前事件的当前目标元素,即触发事件的元素。在事件冒泡过程中,currentTarget 的值会改变,以反映当前事件的目标元素。 在上面的代码中,...

    event.currentTarget和document.activeElement用法

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

    jQuery事件对象的属性和方法详解

    event.currentTarget属性用于获取当前事件处理函数中绑定事件的元素。在事件冒泡过程中,event.currentTarget始终不变,即使event.target在冒泡过程中可能改变。 通过以上内容,我们了解了jQuery事件对象中的几个...

    javaScript事件学习小结(四)event的公共成员(属性和方法)

    这个对象包含了一系列的属性和方法,对于不同的事件类型,可用的属性和方法会有所不同。但无论哪种类型的事件,都存在一些公共成员,这些公共成员在所有事件处理中都能被使用。下面将详细探讨这些公共成员,帮助...

    微信小程序中data-key属性之数据传输(经验总结)

    在事件处理函数中,`event.target` 和 `event.currentTarget` 是两个重要的对象,它们分别代表触发事件的组件和事件捕获阶段的当前组件。通常,`event.target.dataset` 可以用来获取绑定在组件上的`data-key`属性的...

    Js控制链接打开方式

    这个功能的核心在于利用JavaScript的事件处理和窗体属性来改变链接的默认行为。这里我们将深入探讨如何用JS控制链接的打开方式,以及涉及的`_blank`和`_self`两个目标属性。 首先,了解`_blank`和`_self`这两个链接...

    深入浅出讲解flex中的事件机制

    每个事件都有一个唯一的`target`属性,它指向实际触发事件的对象。无论事件如何传播,`target`始终指向最初的触发对象。 ##### 2. 当前目标(`currentTarget`) `currentTarget`则表示事件处理函数被绑定到的对象。...

    JavaScript事件对象深入详解

    JavaScript事件对象是JavaScript编程中处理用户交互和...总的来说,理解JavaScript事件对象的属性和方法是创建响应式和交互式网页的关键。熟练掌握事件对象的使用,可以帮助开发者创建更高效、更健壮的JavaScript代码。

    第09章 事件对象(下)

    在本章中,我们将深入探讨JavaScript中的事件对象(Event Object),这是Web开发中不可或缺的一部分,...通过理解和熟练运用事件对象的各种属性和方法,开发者可以更好地控制页面的行为,提升应用的功能和用户体验。

Global site tag (gtag.js) - Google Analytics