actionscript 3 - Diferença entre e.target e e.currentTarget




actionscript-3 events (7)

Eu não entendo a diferença, ambos parecem iguais, mas eu acho que não são.

Qualquer exemplo de quando usar um ou outro seria apreciado.


Eu gosto de respostas visuais.

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

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


Vale a pena notar que event.target pode ser útil, por exemplo, para usar um único ouvinte para acionar ações diferentes. Digamos que você tenha o sprite "menu" típico com 10 botões dentro, então ao invés 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 dentro de doAction (event) dependendo do event.target (usando sua propriedade name, etc ...)


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

Por outro lado, e.target pode ser o componente em si ou qualquer criança direta ou grande filho ou bisneto e assim por diante quem 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 filha ou no próprio componente.

Um uso pode ser quando você tem vários Image in Canvas e quer arrastar Images dentro do componente, mas Canvas. Você pode adicionar um ouvinte no Canvas e nesse ouvinte você pode escrever o seguinte código 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();
     }
}

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ê clica em 'btn', e 'true' e 'true' serão exibidos!


e.target é o que aciona o dispatcher de evento para acionar e e.currentTarget é o que você designou ao seu ouvinte.


Ben está completamente correto em sua resposta - então mantenha o que ele diz em mente. O que estou prestes a dizer não é uma explicação completa, mas é uma maneira muito fácil de lembrar como e.target , e.currentTarget funciona em relação a eventos de mouse e à lista de exibição:

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

Então, se você tem 10 botões dentro de um clipe com um nome de instância de "btns" e você faz:

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

Vale a pena notar que se você alterou o MouseEvent para um ROLL_OVER ou definiu a propriedade btns.mouseChildren como false, e.target e e.currentTarget serão sempre "btns".


  • e.target é elemento, que você clicou
  • e.currentTarget é um elemento com o ouvinte de eventos adicionado.

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