Unterschied zwischen e.target und e.currentTarget

276

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.

Artemix
quelle
2
Diese Geige zeigt den Unterschied sehr deutlich
Murhaf Sousli
1
Kennt jemand ActionScript3 gut genug, um zu bestätigen, dass sich seine Ereignisse genauso verhalten wie DOM-Ereignisse?
Ben Creasy
2
JavaScript-Äquivalent: stackoverflow.com/questions/10086427/…
Ben Creasy
Eine Referenz von Murhaf Sousli ist eine klare Erklärung für die Frage, was ein Unterschied ist. Eine etwas vereinfachte Version dieser Geige wäre die beste Antwort.
Azakgaim

Antworten:

204

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

Zevan
quelle
2
Mit anderen Worten, Ziel sind die Kinder und currentTarget sind die Container.
Artemix
107
Nein, currentTargetwartet immer das Objekt auf das Ereignis. targetist das tatsächliche Ziel, das das Ereignis erhalten hat. Pro sprudelndem Ereignis empfängt das Ziel das Ereignis und sprudelt in der Anzeigeliste. (Oder umgekehrt für die Ereigniserfassung)
Poke
4
Wenn es ein Kind war, das das Ereignis ausgelöst hat, sind die Kinder ja Ziele. Normalerweise möchten Sie e.currentTarget verwenden, da Sie dem Listener dies zugewiesen haben. In Situationen wie der oben aufgeführten Zevan, in denen Sie einen Listener in einem Container mit mehreren untergeordneten Elementen haben möchten, verwenden Sie dann e.target, um zu sehen, welches der untergeordneten Elemente das Ereignis ausgelöst hat.
Ben Gale
Kommentar von @poke oben ist die beste Antwort "currentTarget ist immer das Objekt, das zuhört, Ziel ist das tatsächliche Ziel, das das Ereignis erhalten hat"
PandaWood
28

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.

Alex K.
quelle
26

Ich mag visuelle Antworten.

Geben Sie hier die Bildbeschreibung ein

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

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

Maria Ines Parnisari
quelle
Die Frage betrifft AS3, nicht JS.
Artemix
1
Ah okay, tut mir leid wegen der Markierung. Die Antwort gilt jedoch immer noch für beide.
Maria Ines Parnisari
8

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.

Cay
quelle
5

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!

Yuan Zhaohao
quelle
3

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();
     }
}
Asad
quelle
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
quelle
2
  • 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.

Marcel GJS
quelle
0

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.

Samyak Jain
quelle