e.target和e.currentTarget之间的区别

我不明白它们之间的区别，它们看起来似乎相同，但我想它们并不相同。

任何何时使用一个或另一个的示例都将受到赞赏。

这个小提琴非常清楚地显示了差异

有没有人足够了解ActionScript3，以确认其事件的行为与DOM事件相同？

等效的JavaScript：stackoverflow.com/questions/10086427/…

Murhaf Sousli提供的参考是一个清晰的解释，回答了有什么区别的问题。对此提琴进行一些简化后的版本将是最佳答案。

#1 楼

Ben的回答完全正确-请牢记他说的话。我要告诉您的不是一个完整的解释，但这是一种很容易记住e.target，e.currentTarget与鼠标事件和显示列表相关的工作方式：
e.target =点号之前的东西...（见下文）

因此，如果您有10个按钮在实例名称为“ btns”的剪辑中，您可以执行以下操作：

btns.addEventListener(MouseEvent.MOUSE_OVER, onOver);
// btns = the thing before the dot of an addEventListener call
function onOver(e:MouseEvent):void{
  trace(e.target.name, e.currentTarget.name);
}

e.currentTarget将是10个按钮之一，而e.target将始终是“ btns”剪辑。

值得注意的是，如果将MouseEvent更改为ROLL_OVER或将属性e.currentTarget设置为false，则btns.mouseChildren和e.target都将始终为“ btns”。

因此，换句话说，target是孩子，而currentTarget是容器。

– Artemix
2011年5月7日14:27

不，currentTarget始终是侦听事件的对象；目标是接收事件的实际目标。每次事件冒泡时，目标都会接收到事件并在显示列表中冒泡。（或者相反，用于事件捕获）

–戳
2011年5月7日14:34

如果是由孩子派遣的，则目标是孩子。通常，您将要使用e.currentTarget，因为这是您分配给侦听器的对象。但是在某些情况下（例如上面列出的一个Zevan），您希望一个容器上有多个子级的侦听器，然后使用e.target来查看哪个子级调度了该事件。

–本·盖尔
2011年5月7日14:35

来自@poke的评论是最佳答案“ currentTarget始终是侦听对象，target是接收事件的实际目标”

– PandaWood
16年4月1日在6:21

#2 楼

e.target是触发事件调度程序触发的原因，而e.currentTarget是您分配了侦听器的原因。

这是一个很好的例子：joequery.me/code/event-target-vs-event-currenttarget-30-seconds

– Glenn Wark
17 Mar 1 '17 at 15:51

#3 楼

e.currentTarget始终是事件实际绑定的元素。 e.target是事件起源的元素，因此e.target可以是e.currentTarget的子元素，或者e.target可以是=== e.currentTarget，具体取决于标记的结构。

#4 楼

我喜欢视觉答案。

单击#btn时，将调用两个事件处理程序，它们将输出您在图片中看到的内容。

此处的演示：https： //jsfiddle.net/ujhe1key/

问题是关于AS3而不是JS。

– Artemix
16-10-23在14:35

好的，对标记感到抱歉。答案仍然适用于两者。

–Maria Ines Parnisari
16-10-23在21:23

#5 楼

值得注意的是event.target可能有用，例如，使用单个侦听器触发不同的动作。假设您有一个带有10个按钮的典型“菜单”子画面，因此无需执行以下操作：

menu.button1.addEventListener(MouseEvent.CLICK, doAction1);
menu.button2.addEventListener(MouseEvent.CLICK, doAction2);
etc...

您可以简单地执行以下操作：

menu.addEventListener(MouseEvent.CLICK, doAction);

并根据事件event.target（使用其name属性等）在doAction（event）中触发不同的动作

#6 楼

举个例子：

var body = document.body,
    btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
    console.log( event.currentTarget === body );
    console.log( event.target === btn );
}, false );

当您单击“ btn”时，将出现“ true”和“ true”！

#7 楼

target  is the element that triggered the event (e.g., the user clicked on)

currenttarget is the element that the event listener is attached to.

#8 楼

e.currentTarget将始终返回添加了事件侦听器的组件。

另一方面，e.target可以是组件本身，也可以是任何直接子代，孙子代或孙子代。以此类推。换句话说，e.target返回在“显示列表”层次结构中位于顶部的组件，并且必须在子层次结构或组件本身中。

当您在Canvas中有多个Image时，一种用途是并且您想要将图像拖到组件内但可以拖到画布中。您可以在Canvas上添加一个侦听器，并可以在该侦听器中编写以下代码，以确保不会拖动Canvas。

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

#9 楼

e.target是元素，您可以click
e.currentTarget是具有添加的事件侦听器的元素。

如果单击button的子元素，则最好使用currentTarget来检测按钮属性，在CH中使用e有时会出现问题.target。

#10 楼

e.currentTarget是事件已注册的元素（父级），e.target是事件所指向的节点（子级）。

编程黑洞网