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

Posted 2023-02-16

【中文标题】e.target 和 e.currentTarget 之间的区别

【英文标题】：Difference between e.target and e.currentTarget

【发布时间】：2011-08-20 18:06:54

【问题描述】：

我不明白它们的区别，它们看起来都一样，但我想它们不是。

任何关于何时使用其中一个或另一个的示例将不胜感激。

【问题讨论】：

这个fiddle 非常清楚地显示了差异

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

javascript 等效项：***.com/questions/10086427/…

Murhaf Sousli 提供的参考资料清晰地解释了不同之处的问题。这个小提琴的一个简单的版本将是最好的答案。

【参考方案1】：

e.target 是触发事件分派器触发的对象，e.currentTarget 是您分配侦听器的对象。

【讨论】：

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

【参考方案2】：

Ben 的回答完全正确 - 所以请记住他所说的话。我要告诉你的不是完整的解释，但它是一种非常简单的方法来记住 e.target、e.currentTarget 如何与鼠标事件和显示列表相关：

e.target = 鼠标下的东西（正如本所说的......触发事件的东西）。 e.currentTarget = 点之前的东西...（见下文）

因此，如果您在一个实例名称为“btns”的剪辑中有 10 个按钮并且您这样做：

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.target 将是 10 个按钮之一，e.currentTarget 将始终是“btns”剪辑。

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

【讨论】：

所以，换句话说，target 是孩子，currentTarget 是容器。

不，currentTarget 始终是监听事件的对象； target 是接收事件的实际目标。每个事件冒泡，目标接收事件并在显示列表中冒泡。 （或者相反的事件捕获）

如果是子级调度事件，那么目标就是子级。通常你会想要使用 e.currentTarget 因为这是你分配给监听器的。但是在某些情况下，例如上面列出的 Zevan，您希望在具有多个子节点的容器上使用一个侦听器，然后您可以使用 e.target 来查看哪个子节点调度了事件。

上面@poke的评论是最好的答案“currentTarget总是监听的对象，target是接收到事件的实际目标”

【参考方案3】：

我喜欢直观的答案。

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

在这里演示：https://jsfiddle.net/ujhe1key/

【讨论】：

问题是关于 AS3 而不是 JS。

啊，好吧，对标签感到抱歉。答案仍然适用于两者。

【参考方案4】：

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

【参考方案5】：

值得注意的是 event.target 可能很有用，例如，用于使用单个侦听器来触发不同的操作。假设你有一个典型的“菜单”精灵，里面有 10 个按钮，所以不要这样做：

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

你可以这样做：

menu.addEventListener(MouseEvent.CLICK, doAction);

并根据 event.target 在 doAction(event) 中触发不同的操作（使用它的 name 属性等...）

【参考方案6】：

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.

【参考方案7】：

举个例子：

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'！

【参考方案8】：

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

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

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

function dragImageOnly(e:MouseEvent):void

    if(e.target==e.currentTarget)
    
        return;
     
     else
     
        Image(e.target).startDrag();
     

【参考方案9】：

e.target 是元素，你 f.e.点击 e.currentTarget 是添加了事件监听器的元素。

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

【参考方案10】：

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