`

target和currentTarget的区别

阅读更多

target和currentTarget的区别

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

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

以一个实例来说吧
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" name="app"
 3     initialize="init()">
 4     
 5     <mx:Button id="btn" name="btn" label="按钮1"/>
 6     
 7     <mx:Button id="btn2" name="btn2" label="按钮2" click="clickHandler(event)" />
 8     
 9     <mx:Script>
10         <![CDATA[
11             import mx.controls.Alert;
12             private function init(): void
13             {
14                 addEventListener(MouseEvent.CLICK, clickHandler);                 
15             }
16             
17             private function clickHandler(event: MouseEvent): void
18             {
19                 Alert.show("target: " + (event.target as DisplayObject).name
20                     + "\ncurrentTarget: " + (event.currentTarget as DisplayObject).name);
21             }
22         ]]>
23     </mx:Script>
24 </mx:Application>
25 

说明:
  1. 点击btn,btn是事件发送者,因此,target是btn;
  2. app注册了事件监听器,用于监听MouseEvnet.Click事件,是事件处理者,因此currentTarget是app
  3. btn2自己注册了click事件,那么btn2既是事件发送者,又是处理者,因此,target和currentTarget都是btn2,这种情况下,两者是一致的
  4. 同时注意,由于app注册了鼠标点击事件,在点击btn2的时候,首先响应的是app的处理器,然后才是btn2的处理器
通过上面的分析,应该比较清楚的区分什么时候用target,什么时候用currentTarget了,在实际编程中实践几次,就不会感到迷惑了。

分享到:
评论

相关推荐

    Javascript中, event 的 target 与 currentTarget 的区别

    当我们谈论`event`对象时,`target`和`currentTarget`是两个非常关键的属性,它们在处理事件流时扮演着重要角色。理解这两个属性的区别对于编写高效且准确的事件处理程序至关重要。 `event.target`指的是触发事件的...

    JS target与currentTarget区别说明

    在实际应用中,`target` 和 `currentTarget` 的区别可以用来实现特定的功能。例如,如果需要对整个容器或其所有子元素执行相同的操作,可以将事件处理函数绑定到容器元素,并使用 `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的区别详解

    总结来说,e.target和e.currentTarget的区别主要体现在它们分别表示了事件触发的源头和事件处理函数绑定的目标。e.target可以动态变化,根据点击的位置不同而指向不同的元素;e.currentTarget则是固定的,它指向的是...

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

    总的来说,`e.target`与`e.currentTarget`在微信小程序的事件处理中扮演着关键的角色,它们帮助开发者区分事件的来源和当前处理事件的元素,使得事件处理更加灵活和强大。掌握这两者的区别对于编写高效且正确的事件...

    as3事件属性

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

    javascript currentTarget对象介绍

    在讨论 `currentTarget` 之前,我们先简要回顾一下 `target` 和 `currentTarget` 的基本概念以及它们之间的区别: 1. **`target`**:表示触发事件的原始元素。 2. **`currentTarget`**:表示当前正在处理事件的元素...

    HTML5自定义属性的问题分析

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

    event.currentTarget和document.activeElement用法

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

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

    本文将详细探讨Flex中的事件机制,特别是`target`与`currentTarget`的区别,以及`useCapture`的作用。 #### 二、事件机制基础 在Flex中,事件是应用程序响应用户输入或系统变化的主要方式。事件处理通常涉及三个...

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

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

    JavaScript事件对象深入详解

    当事件处理程序直接绑定到目标元素上时,`this`、`currentTarget`和`target`三个值相同。但当处理程序绑定到父元素时,它们会有差异,例如: ```javascript document.body.onclick = function(event) { console....

    Js控制链接打开方式

    const currentTarget = link.getAttribute('target'); if (currentTarget === '_blank') { link.target = link.dataset.defaultTarget; // 恢复为默认 } else { link.target = '_blank'; // 更改为新窗口打开 ...

Global site tag (gtag.js) - Google Analytics