Diferença entre e.target e e.currentTarget

Não entendo a diferença, ambos parecem iguais, mas acho que não.

Qualquer exemplo de quando usar um ou outro seria apreciado.

Ben está completamente correto em sua resposta - então lembre-se do que ele diz. O que eu estou a ponto de dizer que não é uma explicação completa, mas é uma maneira muito fácil de lembrar como e.target, e.currentTargettrabalho em relação a eventos do mouse e a lista de exibição:

e.target= A coisa sob o mouse (como ben diz ... a coisa que aciona o evento). e.currentTarget= A coisa antes do ponto ... (veja abaixo)

Portanto, se você tiver 10 botões dentro de um clipe com o nome de instância "btns" e fizer:

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.targetserá um dos 10 botões e e.currentTargetsempre será o clipe "btns".

É importante notar que, se você mudou o MouseEvent a um ROLL_OVER ou definir a propriedade btns.mouseChildrencomo false, e.targete e.currentTargetserão ambos sempre "Botões".

e.targeté o que aciona o despachante de eventos e e.currentTargeté o que você atribuiu ao seu ouvinte.

e.currentTargeté sempre o elemento em que o evento está realmente vinculado. e.targeté o elemento do qual o evento se originou, portanto, e.targetpode ser filho de e.currentTarget, ou e.targetpode ser === e.currentTarget, dependendo de como sua marcação está estruturada.

Eu gosto de respostas visuais.

Quando você clica #btn, dois manipuladores de eventos são chamados e exibem o que você vê na figura.

Demonstração aqui: https://jsfiddle.net/ujhe1key/

Vale ressaltar que event.target pode ser útil, por exemplo, para usar um único ouvinte para acionar ações diferentes. Digamos que você tenha o típico menu "sprite" com 10 botões dentro, então, em vez de fazer:

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

Você pode simplesmente fazer:

menu.addEventListener(MouseEvent.CLICK, doAction);

E desencadeie uma ação diferente em doAction (event), dependendo do event.target (usando sua propriedade name, etc ...)

faça um exemplo:

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

quando você clicar em 'btn' e 'true' e 'true' aparecerão!

O e.currentTarget sempre retornaria o componente no qual o ouvinte de evento é adicionado.

Por outro lado, e.target pode ser o componente em si ou qualquer filho ou neto direto ou bisneto e assim por diante que recebeu o evento. Em outras palavras, e.target retorna o componente que está no topo da hierarquia da Lista de Exibição e deve estar na hierarquia filho ou no próprio componente.

Um uso pode ser quando você tem várias Imagens no Canvas e deseja arrastar Imagens para dentro do componente, exceto o Canvas. Você pode adicionar um ouvinte no Canvas e, nesse ouvinte, pode escrever o código a seguir para garantir que o Canvas não seja arrastado.

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

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.

• e.target é o elemento no qual você clica
• e.currentTarget é um elemento com o ouvinte de evento adicionado.

Se você clicar no elemento filho do botão, é melhor usar currentTarget para detectar os atributos dos botões; no CH, às vezes é problema usar o e.target.

e.currentTarget é o elemento (pai) onde o evento está registrado, e.target é o nó (filhos) para o qual o evento está apontando.