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

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

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

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

e.targetwyzwala wyzwalacz dyspozytora zdarzeń i e.currentTargetprzypisuje się go do odbiornika.

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.

Lubię wizualne odpowiedzi.

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/

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

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”!

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();
     }
}

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.

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

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.