Qual è la differenza tra Event.target, Event.toElement e Event.srcElement?


88

Ho il codice seguente:

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

Facendo clic con il tasto destro del mouse su a <div class="foo"></div>, restituisce questo:

div.foo, div.foo, div.foo

Facendo clic con il tasto destro del mouse su a <input>, restituisce questo:

input, input, input

Tutti sembrano portare lo stesso risultato. C'è qualche situazione in cui uno di loro ha un uso diverso dagli altri?

Risposte:


81

Il target dell'evento è l'elemento a cui viene inviato l'evento:

L'oggetto a cui viene indirizzato un evento utilizzando il flusso di eventi DOM . L'obiettivo dell'evento è il valore Event.target dell'attributo.

srcElementè un modo non standard di IE per ottenere il file target.

Il target dell'evento corrente è l'elemento che ha il listener di eventi che è attualmente richiamato:

In un flusso di eventi, la destinazione dell'evento corrente è l'oggetto associato al gestore di eventi che viene attualmente inviato. Questo oggetto PU essere l' obiettivo dell'evento stesso o uno dei suoi antenati. Il target dell'evento corrente cambia quando l' evento si propaga da un oggetto all'altro attraverso le varie fasi del flusso di eventi. Il target dell'evento corrente è il valore Event.currentTargetdell'attributo.

L'utilizzo thisall'interno di un listener di eventi è un modo comune (e standard) per ottenere l'obiettivo dell'evento corrente.

Alcuni eventi gentili hanno relatedTarget:

Utilizzato per identificare un secondario EventTargetcorrelato a un evento dell'interfaccia utente, a seconda del tipo di evento.

fromElemente toElementsono modi non standard di IE per ottenere il relatedTarget.


7
Sto usando "toElement" nella versione 60 di Chrome. Sei sicuro che sia un "metodo non standard di IE"?
— PandaWood

2
MSDN dice che è "non standard" e "non utilizzarlo su siti di produzione che si affacciano sul Web": developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
— TetraDev

l'ultimo Chrome supporta "toElement" ma non Mozilla Firefox. Ho dovuto utilizzare la proprietà "target" per supportare alcuni casi in Mozilla.
— Vishal
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.