Unterschied zwischen e.target und e.currentTarget

Ich verstehe den Unterschied nicht, beide scheinen gleich zu sein, aber ich denke, sie sind es nicht.

Beispiele für die Verwendung des einen oder anderen sind willkommen.

Ben ist in seiner Antwort völlig richtig - denken Sie also daran, was er sagt. Was ich Ihnen zu sagen , ist keine vollständige Erklärung, aber es ist eine sehr einfache Art und Weise , wie sich daran zu erinnern e.target, e.currentTargetArbeit in Bezug auf Mausereignisse und der Anzeigeliste:

e.target= Das Ding unter der Maus (wie Ben sagt ... das Ding, das das Ereignis auslöst). e.currentTarget= Das Ding vor dem Punkt ... (siehe unten)

Wenn Sie also 10 Schaltflächen in einem Clip mit dem Instanznamen "btns" haben und Folgendes tun:

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.targetwird eine der 10 Schaltflächen sein und e.currentTargetwird immer der "btns" -Clip sein.

Es ist erwähnenswert, dass , wenn Sie verändert die Mouseevent zu einem ROLL_OVER oder die Eigenschaft btns.mouseChildrenauf false, e.targetund e.currentTargetwerden beide immer „btns“.

e.targetDies löst den Ereignis-Dispatcher aus und e.currentTargetist das, was Sie Ihrem Listener zugewiesen haben.

e.currentTargetist immer das Element, an das das Ereignis tatsächlich gebunden ist. e.targetdas Element ist das Ereignis , von denen sie abstammt, so e.targetkönnte ein Kind sein e.currentTarget, oder e.targetkönnte sein , === e.currentTarget, je nachdem , wie Ihr Markup strukturiert ist.

Ich mag visuelle Antworten.

Wenn Sie auf klicken #btn, werden zwei Ereignishandler aufgerufen, die das ausgeben, was Sie auf dem Bild sehen.

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

Es ist erwähnenswert, dass event.target nützlich sein kann, um beispielsweise einen einzelnen Listener zum Auslösen verschiedener Aktionen zu verwenden. Angenommen, Sie haben das typische "Menü" -Sprite mit 10 Schaltflächen im Inneren, anstatt Folgendes zu tun:

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

Sie können einfach tun:

menu.addEventListener(MouseEvent.CLICK, doAction);

Und lösen Sie je nach event.target (unter Verwendung der Namenseigenschaft usw.) eine andere Aktion in doAction (Ereignis) aus.

Machen Sie ein Beispiel:

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

Wenn Sie auf "btn" klicken, werden "true" und "true" angezeigt!

e.currentTarget würde immer die Komponente zurückgeben, zu der der Ereignis-Listener hinzugefügt wird.

Andererseits kann e.target die Komponente selbst oder ein direktes Kind oder Enkelkind oder Enkelkind usw. sein, das die Veranstaltung erhalten hat. Mit anderen Worten, e.target gibt die Komponente zurück, die in der Anzeigelistenhierarchie ganz oben steht und sich in der untergeordneten Hierarchie oder in der Komponente selbst befinden muss.

Eine Verwendung kann sein, wenn Sie mehrere Bilder in Canvas haben und Bilder in die Komponente ziehen möchten, aber Canvas. Sie können einen Listener auf Canvas hinzufügen und in diesem Listener den folgenden Code schreiben, um sicherzustellen, dass Canvas nicht gezogen wird.

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 ist ein Element, auf das Sie klicken
• e.currentTarget ist ein Element mit hinzugefügtem Ereignis-Listener.

Wenn Sie auf das untergeordnete Element der Schaltfläche klicken, ist es besser, currentTarget zum Erkennen von Schaltflächenattributen zu verwenden. In CH ist es manchmal problematisch, e.target zu verwenden.

e.currentTarget ist ein Element (übergeordnetes Element), in dem das Ereignis registriert ist, e.target ist ein Knoten (untergeordnete Elemente), auf den das Ereignis verweist.