Was ist der Unterschied zwischen Event.target, Event.toElement und Event.srcElement?

84

Ich habe folgenden Code:

document.oncontextmenu = function(evt) {
    evt = evt || window.event;
    console.log(evt.target, evt.toElement, evt.srcElement);
};

Durch Klicken mit der rechten Maustaste auf a <div class="foo"></div>wird Folgendes zurückgegeben:

div.foo, div.foo, div.foo

Durch Klicken mit der rechten Maustaste auf a <input>wird Folgendes zurückgegeben:

Eingabe, Eingabe, Eingabe

Alle scheinen das gleiche Ergebnis zu bringen. Gibt es eine Situation, in der einer von ihnen einen anderen Nutzen hat als die anderen?

Guilherme Nascimento
quelle

Antworten:

74

Das Ereignisziel ist das Element, an das das Ereignis gesendet wird:

Das Objekt, auf das ein Ereignis mithilfe des DOM-Ereignisflusses ausgerichtet ist . Das Ereignisziel ist der Wert des Event.target Attributs.

srcElementist ein IE nicht standardmäßiger Weg, um die zu erhalten target.

Das aktuelle Ereignisziel ist das Element mit dem aktuell aufgerufenen Ereignis-Listener:

In einem Ereignisfluss ist das aktuelle Ereignisziel das Objekt, das dem Ereignishandler zugeordnet ist, der gerade ausgelöst wird. Dieses Objekt kann das Ereignisziel selbst oder einer seiner Vorfahren sein. Das aktuelle Ereignisziel ändert sich, wenn sich das Ereignis durch die verschiedenen Phasen des Ereignisflusses von Objekt zu Objekt ausbreitet . Das aktuelle Ereignisziel ist der Wert des Event.currentTargetAttributs.

Die Verwendung thisinnerhalb eines Ereignis-Listeners ist eine gängige (und standardmäßige) Methode, um das aktuelle Ereignisziel zu erhalten.

Einige freundliche Ereignisse haben eine relatedTarget:

Wird verwendet, um eine sekundäre EventTargetBeziehung zu einem UI-Ereignis zu identifizieren , abhängig von der Art des Ereignisses.

fromElementund toElementsind IE nicht standardmäßige Möglichkeiten, um die zu erhalten relatedTarget.

Oriol
quelle
7
Ich verwende "toElement" in Chrome Version 60 - sind Sie sicher, dass es sich um einen "nicht standardmäßigen IE-Weg" handelt?
PandaWood
2
MSDN sagt, es sei "nicht standardisiert" und "verwende es nicht auf Produktionsstandorten, die dem Web zugewandt sind": developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
TetraDev
Das neueste Chrome unterstützt "toElement", nicht jedoch Mozilla Firefox. Ich musste die Eigenschaft 'target' verwenden, um einige Fälle in Mozilla zu unterstützen.
Vishal