`

target和currentTarget的区别

阅读更多
target和currentTarget的区别

开始学习Flex,会在别人的代码中经常看到target和currentTarget这两个属性,一般是event.target、event.currentTarget,那他们两个有什么区别呢?

简单说,target是事件的调用对象(event dispatcher),currentTarget是事件的处理对象(event processor)

个人心得:

     可以认为currentTarget是事件的监听者,如果两个组建同时对一个事件进行了监听,则处理从上层到下层顺序依次执行;同级时,按监听添加顺序执行。
     一般,target是currentTarget指向的对象(组件)自身或者其子类。

转一例子:

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" name="app"
     initialize="init()">
     
     <mx:Button id="btn" name="btn" label="按钮1"/>
     
     <mx:Button id="btn2" name="btn2" label="按钮2" click="clickHandler(event)" />
     
     <mx:Script>
         <![CDATA[
             import mx.controls.Alert;
             private function init(): void
             {
                 addEventListener(MouseEvent.CLICK, clickHandler);                 
             }
             
             private function clickHandler(event: MouseEvent): void
             {
                 Alert.show("target: " + (event.target as DisplayObject).name
                     + "\ncurrentTarget: " + (event.currentTarget as DisplayObject).name);
             }
         ]]>
     </mx:Script>
 </mx:Application>




解释:


1、点击btn,btn是事件发送者,因此,target是btn;

2、app注册了事件监听器,用于监听MouseEvnet.Click事件,是事件处理者,因此currentTarget是app

3、btn2自己注册了click事件,那么btn2既是事件发送者,又是处理者,因此,target和currentTarget都是btn2,这种情况下,两者是一致的

4、同时注意,由于app注册了鼠标点击事件,在点击btn2的时候,首先响应的是app的处理器,然后才是btn2的处理器

分享到:
评论

相关推荐

    Javascript中, event 的 target 与 currentTarget 的区别

    NULL 博文链接:https://rainbow702.iteye.com/blog/1668953

    JS target与currentTarget区别说明

    target在事件流的目标阶段;...只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。

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

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

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

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

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

    event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which...

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

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

    as3事件属性

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

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

    主要介绍了微信小程序 e.target与e.currentTarget的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

    此往篇文档非常清淅的讲解在flex中的事件机制,告诉你target与currenttarget的区别

    event.currentTarget和document.activeElement用法

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

    HTML5自定义属性的问题分析

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

    易被忽视的js事件问题总结

    主要为大家详细介绍了易被忽视的js事件问题,包括跨平台事件、冒泡中target和currentTarget的区别,感兴趣的朋友可以参考一下

    u1_lesson_event_bubbling:本课介绍了JavaScript中的事件冒泡

    区分事件的target和currentTarget 停止事件传播 课程说明 什么是事件冒泡? 当元素嵌套在DOM中时,DOM需要一种方法来确定应该触发事件的元素。 如果在外部元素(绿色框​​)上设置了单击事件侦听器,是否在内部...

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

    currentTarget 指添加事件handler的元素本身,如el.addEventListener中el就是currentTarget。IE6/7/8没有对应属性,可在handler内使用this来替代如evt.currentTarget = this。relativeTarget 指事件相关的元素,一般...

    JavaScript的MVC框架Gillie.zip

    Gillie 是一个微型的 JavaScript MVC 框架(体积4k),其灵感来自于 Backbone、jQuery ... var target = e.currentTarget;  $( target ).css( 'color', 'red' );  } }); 标签:Gillie Web框架

    微信小程序开发基础(2)事件

    事件的类别 ...长按事件 longtap 触摸事件 touchstart touchend touchmove touchcancel ... 免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用

Global site tag (gtag.js) - Google Analytics