Różnica między E. target a e. currentTarget

e.target jest tym, co uruchamia dyspozytor zdarzeń, a e.currentTarget jest tym, do czego przypisałeś słuchacza.

e.currentTarget jest zawsze elementem zdarzenia jest rzeczywiście związane zrobić. {[1] } jest elementem, z którego zdarzenie pochodzi, więc e.target może być potomkiem e.currentTarget lub {[1] } może być = = = e.currentTarget, w zależności od struktury znaczników.

Lubię wizualne odpowiedzi.

Po kliknięciu #btn wywoływane są dwie procedury obsługi zdarzeń, które wyświetlają to, co widzisz na zdjęciu.

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

Warto zwrócić uwagę na to wydarzenie.cel może być przydatny, na przykład, do użycia pojedynczego słuchacza do wyzwalania różnych działań. Załóżmy, że masz typowy sprite "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 uruchamia inną akcję wewnątrz doaction (event) w zależności od zdarzenia.target (używając jego właściwości name, itp...)

Podaj 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 );

Po kliknięciu 'btn', pojawią się 'true' i 'true'!

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. currentTarget zawsze zwróci komponent, do którego zostanie dodany detektor zdarzeń.

Z drugiej strony, e.celem może być sam komponent lub dowolne bezpośrednie dziecko lub wnuk lub wnuk i tak dalej, kto otrzymał Zdarzenie. Innymi słowy, e.target zwraca komponent, który znajduje się na górze w hierarchii listy wyświetlanych I musi znajdować się w hierarchii podrzędnej lub sam komponent.

Jedno użycie może być, gdy masz kilka obrazów w płótnie i chcesz przeciągnąć obrazy wewnątrz komponentu, ale Canvas. Możesz dodać słuchacza na płótnie i w tym słuchaczu możesz napisać następujący kod, aby upewnić się, że płótno nie zostanie przeciągnięte.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

• e.target to element, który np. klikasz
• e.currentTarget jest elementem z dodanym detektorem zdarzeń.

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

E. currentTarget to element (rodzic), do którego jest rejestrowane zdarzenie, e.target to node(children), do którego wskazuje Zdarzenie.