Não entendo a diferença, ambos parecem iguais, mas acho que não.
Qualquer exemplo de quando usar um ou outro seria apreciado.
Não entendo a diferença, ambos parecem iguais, mas acho que não.
Qualquer exemplo de quando usar um ou outro seria apreciado.
Respostas:
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.currentTarget
trabalho 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.target
será um dos 10 botões e e.currentTarget
sempre será o clipe "btns".
É importante notar que, se você mudou o MouseEvent a um ROLL_OVER ou definir a propriedade btns.mouseChildren
como false, e.target
e e.currentTarget
serão ambos sempre "Botões".
currentTarget
sempre é o objeto que está ouvindo o evento; target
é o destino real que recebeu o evento. Por evento borbulhante, o destino recebe o evento e borbulha a lista de exibição. (Ou o contrário para captura de eventos)
e.target
é o que aciona o despachante de eventos e e.currentTarget
é o que você atribuiu ao seu ouvinte.
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.
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.