it-swarm.com.de

Unterschied zwischen e.target und e.currentTarget

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

Alle Beispiele, wann der eine oder der andere verwendet werden sollte, sind willkommen.

224
Artemix

Ben hat völlig recht in seiner Antwort - also behalte, was er sagt. Was ich Ihnen gerade erzählen möchte, ist keine vollständige Erklärung, aber es ist eine sehr einfache Möglichkeit, sich daran zu erinnern, wie e.target, e.currentTarget in Bezug auf Mausereignisse und die Anzeigeliste funktionieren:

e.target = Die Sache unter der Maus (wie ben sagt ... die Sache, die das Ereignis auslöst) .e.currentTarget = Die Sache vor dem Punkt ... (siehe unten)

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

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.target ist eine der 10 Schaltflächen und e.currentTarget ist immer der Clip "btns".

Wenn Sie das MouseEvent in ROLL_OVER geändert haben oder die Eigenschaft btns.mouseChildren auf false setzen, sind e.target und e.currentTarget immer "btns".

187
Zevan

e.target löst den Ereignis-Dispatcher aus und e.currentTarget ist das, was Sie Ihrem Listener zugewiesen haben. 

371
Ben Gale

e.currentTarget ist immer das Element, an das das Ereignis gebunden ist. e.target ist das Element, von dem das Ereignis stammt, daher könnte e.target ein untergeordnetes Element von e.currentTarget sein, oder e.target könnte === e.currentTarget sein, abhängig von der Struktur Ihres Markups.

20
Alex K

Ich mag visuelle Antworten. 

 enter image description here

Wenn Sie auf #btn klicken, werden zwei Event-Handler aufgerufen, die das ausgeben, was Sie im Bild sehen.

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

13

Beachten Sie, dass event.target beispielsweise nützlich ist, wenn ein einzelner Listener verschiedene Aktionen auslösen soll. Nehmen wir an, Sie haben das typische "Menü" -Sprite mit 10 Schaltflächen darin, 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 innerhalb von doAction (event) je nach event.target eine andere Aktion aus (über die name -Eigenschaft usw.).

8
Cay

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

4
Yuan Zhaohao

e.currentTarget gibt immer die Komponente zurück, zu der der Ereignislistener hinzugefügt wird.

Auf der anderen Seite kann e.target die Komponente selbst oder ein direktes Kind, ein Enkelkind oder ein Enkelkind usw. sein, die das Ereignis erhalten haben. Mit anderen Worten, e.target gibt die Komponente zurück, die sich in der Hierarchie der Anzeigelisten oben befindet und in der untergeordneten Hierarchie oder in der Komponente selbst sein muss.

Eine Verwendung kann sein, wenn Sie mehrere Bilder im Canvas-Bereich haben und Sie Bilder innerhalb der Komponente außer Canvas ziehen möchten. Sie können auf Canvas einen Listener hinzufügen. In diesem Listener können Sie 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();
     }
}
3
Asad
  • e.target ist ein Element, das Sie f.e. klicken
  • e.currentTarget ist ein Element mit hinzugefügtem Ereignis-Listener.

Wenn Sie auf das untergeordnete Element der Schaltfläche klicken, sollten Sie die Attribute von Schaltflächen mithilfe von currentTarget ermitteln. In CH ist es manchmal ein Problem, e.target zu verwenden.

2
Marcel GJS

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

0
Samyak Jain
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.