ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

fiddle 非常清楚地显示了差异
有没有人足够了解 ActionScript3 以确认其事件的行为与 DOM 事件相同?
Murhaf Sousli 提供的参考资料是一个清晰的解释,回答了差异是什么的问题。这个小提琴的一个简化版本将是最好的答案。

M
Mads Hansen

e.target 是触发事件调度程序触发的内容,而 e.currentTarget 是您将侦听器分配给的内容。


A
Alexander Solonik

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

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

因此,如果您在剪辑中有 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.target 将是 10 个按钮之一,而 e.currentTarget 将始终是“btns”剪辑。

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


所以,换句话说,target 是孩子,currentTarget 是容器。
不,currentTarget 始终是监听事件的对象; target 是接收事件的实际目标。每个事件冒泡,目标接收事件并在显示列表中冒泡。 (或者反过来进行事件捕获)
如果是孩子派发了事件,那么是的目标是孩子。通常你会想要使用 e.currentTarget 因为这是你分配给监听器的。但是在某些情况下,例如上面列出的 Zevan,您希望在具有多个子项的容器上使用一个侦听器,然后您将使用 e.target 来查看哪个子项调度了事件。
上面@poke 的评论是最佳答案“currentTarget 始终是监听对象,target 是接收事件的实际目标”
我不知道这是什么意思:'所以如果你在一个剪辑中有 10 个按钮,实例名称为“btns”'
M
Maria Ines Parnisari

我喜欢视觉答案。

https://i.stack.imgur.com/pxWr6.png

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

此处演示:https://jsfiddle.net/ujhe1key/


问题是关于 AS3 而不是 JS。
啊,好吧,对不起标签。答案仍然适用于两者。
A
Alex K

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


C
Cay

值得注意的是 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 属性等...)


M
Muthukrishnan Kandasamy
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.

Y
Yuan Zhaohao

举个例子:

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


A
Asad

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();
     }
}

M
Marcel GJS

e.target 是元素,你可以点击它

e.currentTarget 是添加了事件监听器的元素。

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


S
Samyak Jain

e.currentTarget 是注册事件的元素(父),e.target 是事件指向的节点(子)。