Diferença entre e.target e e.currentTarget

277

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

Qualquer exemplo de quando usar um ou outro seria apreciado.

Artemix
fonte
2
Este violino mostra a diferença de forma muito clara
Murhaf Sousli
1
alguém conhece o ActionScript3 o suficiente para confirmar que seus eventos se comportam da mesma forma que os eventos do DOM?
Ben Creasy
2
Equivalente a JavaScript: stackoverflow.com/questions/10086427/…
Ben Creasy
Uma referência fornecida por Murhaf Sousli é uma explicação clara, respondendo a uma pergunta sobre qual é a diferença. Uma versão simplificada desse violino seria a melhor resposta.
azakgaim 8/02/19

Respostas:

205

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".

Zevan
fonte
2
Portanto, em outras palavras, target são os childs e currentTarget são os contêineres.
Artemix 7/05
107
Não, currentTargetsempre é 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)
pique
4
Se uma criança enviou o evento, então sim os alvos são as crianças. Normalmente, você desejará usar o e.currentTarget, pois é isso que você atribuiu ao ouvinte. Porém, em situações como a do Zevan listada acima, na qual você deseja um ouvinte em um contêiner com vários filhos, você usaria o e.target para ver quais filhos despacharam o evento.
Ben Gale
comentário de @poke acima é a melhor resposta "currentTarget é sempre o objeto de escuta, alvo é o alvo real que recebeu o evento"
PandaWood
28

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.

Alex K
fonte
25

Eu gosto de respostas visuais.

insira a descrição da imagem aqui

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/

Maria Ines Parnisari
fonte
A questão é sobre AS3, não JS.
Artemix 23/10/16
1
Ah, ok, desculpe pela marcação. A resposta ainda se aplica a ambos.
Maria Ines Parnisari 23/10
8

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 ...)

Cay
fonte
5

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!

Yuan Zhaohao
fonte
3

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();
     }
}
Asad
fonte
3
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.
Muthukrishnan Kandasamy
fonte
2
  • 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.

Marcel GJS
fonte
0

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

Samyak Jain
fonte