Diferença entre e.target e e.currentTarget

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.

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 events 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 é o que aciona o dispatcher de evento para acionar e e.currentTarget é o que você designou ao seu ouvinte.

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

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 do doAction (event) dependendo do event.target (usando sua propriedade name, etc …)

Eu gosto de respostas visuais.

insira a descrição da imagem aqui

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

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

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 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 elemento que você clicou
  • e.currentTarget é um elemento com o ouvinte de events 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.

e.currentTarget é element (parent) onde o evento é registrado, e.target é node (children) para o qual o evento está apontando.