Różnica między e.target i e.currentTarget

276

Nie rozumiem różnicy, oba wydają się takie same, ale chyba nie są.

Docenione zostaną wszelkie przykłady użycia jednego lub drugiego.

Artemix
źródło
2
To skrzypce bardzo wyraźnie pokazuje różnicę
Murhaf Sousli
1
czy ktoś zna ActionScript3 wystarczająco dobrze, aby potwierdzić, że jego zdarzenia zachowują się tak samo jak zdarzenia DOM?
Ben Creasy
2
Odpowiednik JavaScript: stackoverflow.com/questions/10086427/…
Ben Creasy
Odniesienie dostarczone przez Murhafa Sousli jest czystym wyjaśnieniem odpowiadającym na pytanie, czym jest różnica. Najlepszym rozwiązaniem byłaby nieco uproszczona wersja tego skrzypca.
azakgaim

Odpowiedzi:

204

Ben ma całkowitą rację w swojej odpowiedzi - pamiętaj więc o tym, co mówi. Co mam powiedzieć, nie jest to pełne wyjaśnienie, ale jest to bardzo łatwy sposób na zapamiętanie jak e.target, e.currentTargetpraca w odniesieniu do zdarzeń myszy i listy wyświetlania:

e.target= Rzecz pod myszą (jak mówi Ben ... rzecz, która wyzwala zdarzenie). e.currentTarget= Rzecz przed kropką ... (patrz poniżej)

Jeśli więc masz 10 przycisków w klipie o nazwie instancji „btns” i wykonujesz:

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.targetbędzie jednym z 10 przycisków i e.currentTargetzawsze będzie klipem „btns”.

Warto zauważyć, że jeśli zmieniłeś MouseEvent na ROLL_OVER lub ustawiłeś właściwość btns.mouseChildrenna false, e.targeti e.currentTargetoba będą zawsze „btns”.

Zevan
źródło
2
Innymi słowy, celem są dzieci, a aktualny cel to kontenery.
Artemix,
107
Nie, currentTargetzawsze obiekt nasłuchuje zdarzenia; targetto rzeczywisty cel, który otrzymał zdarzenie. Podczas propagacji zdarzenia cel odbiera zdarzenie i bąbelkuje listę wyświetlania. (Lub odwrotnie do przechwytywania zdarzeń)
poke
4
Jeśli to dziecko wywołało to wydarzenie, to tak, celem są dzieci. Zwykle będziesz chciał użyć e.currentTarget, ponieważ do tego przypisałeś słuchaczowi. Ale w sytuacjach, takich jak ten wymieniony powyżej Zevan, w którym chcesz jednego słuchacza w kontenerze z wieloma dziećmi, możesz użyć e.target, aby zobaczyć, które z dzieci wysłało zdarzenie.
Ben Gale,
komentarz z @poke powyżej jest najlepszą odpowiedzią „currentTarget jest zawsze obiektem nasłuchującym, cel jest rzeczywistym celem, który otrzymał zdarzenie”
PandaWood
28

e.currentTargetjest zawsze elementem, do którego faktycznie przypisane jest zdarzenie. e.targetjest elementem, z którego pochodzi wydarzenie, więc e.targetmoże być potomkiem e.currentTargetlub e.targetmoże być === e.currentTarget, w zależności od struktury znaczników.

Alex K.
źródło
25

Lubię wizualne odpowiedzi.

wprowadź opis zdjęcia tutaj

Po kliknięciu #btnwywoływane są dwa moduły obsługi zdarzeń, które wyświetlają to, co widać na obrazku.

Demo tutaj: https://jsfiddle.net/ujhe1key/

Maria Ines Parnisari
źródło
Pytanie dotyczy AS3, a nie JS.
Artemix,
1
Ach dobrze, przepraszam za tagowanie. Odpowiedź nadal jednak dotyczy obu.
Maria Ines Parnisari
8

Warto zauważyć, że event.target może być przydatny, na przykład, do używania jednego detektora do wyzwalania różnych akcji. Załóżmy, że masz typową ikonkę „menu” z 10 przyciskami w środku, więc zamiast robić:

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

Możesz po prostu zrobić:

menu.addEventListener(MouseEvent.CLICK, doAction);

I uruchom inną akcję w ramach doAction (event) w zależności od event.target (używając jego właściwości name itp.)

Rafa koralowa
źródło
5

zrób przykład:

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

kiedy klikniesz „btn”, pojawią się „prawda” i „prawda”!

Yuan Zhaohao
źródło
3

e.currentTarget zawsze zwraca komponent, do którego dodawany jest detektor zdarzeń.

Z drugiej strony e.target może być samym komponentem lub dowolnym bezpośrednim dzieckiem, wnukiem lub wnukiem itd., Który otrzymał to wydarzenie. Innymi słowy, e.target zwraca komponent znajdujący się na górze w hierarchii listy wyświetlania i musi znajdować się w hierarchii potomnej lub samym komponencie.

Jednym z zastosowań może być, gdy masz kilka obrazów w kanwie i chcesz przeciągnąć obrazy do komponentu oprócz kanwy. Możesz dodać detektor do Canvas, aw tym detektorze możesz napisać następujący kod, aby upewnić się, że Canvas nie zostanie przeciągnięty.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}
Asad
źródło
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
źródło
2
  • e.target to element, który możesz kliknąć
  • e.currentTarget to element z dodanym detektorem zdarzeń.

Jeśli klikniesz element potomny przycisku, lepiej użyć currentTarget do wykrycia atrybutów przycisków, w CH czasami problem z użyciem e.target.

Marcel GJS
źródło
0

e.currentTarget to element (element nadrzędny), w którym rejestrowane jest zdarzenie, e.target to węzeł (elementy podrzędne), na który wskazuje zdarzenie.

Samyak Jain
źródło