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

Question

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

任何何时使用其中一个的例子都将受到赞赏。

Answer 1

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

Answer 2

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

e.target =鼠标下的东西（正如ben所说......触发事件的东西）。 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”。

Answer 3

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

Answer 4

我喜欢视觉答案。

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

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

Answer 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）中的不同动作。

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

Answer 7

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

另一方面，e.target可以是组件本身或任何直接的孩子或大孩子或曾祖母等等接收该事件的人。换句话说，e.target返回显示列表层次结构中顶部的组件，并且必须位于子层次结构或组件本身中。

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

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

Answer 8

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

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

Answer 9

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