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

Question

Ho il seguente codice:

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

Cliccando con il tasto destro del mouse su un <div class="foo"></div>, restituisce questo:

div.foo, div.foo, div.foo

Facendo clic con il pulsante destro del mouse su un <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?

Answer 1

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

L'oggetto a cui un event è rivolto usando l'DOM event flow. L'obiettivo dell'evento è il valore dell'attributo Event.target .

srcElement è un IE modo non standard per ottenere la target.

Il current event target è l'elemento che ha l'ascoltatore evento che è attualmente richiamato:

In un flusso di eventi, il destinatario dell'evento corrente è l'oggetto associato con la event handler che viene attualmente inviato. Questo oggetto PU MAY essere lo stesso event target o uno dei suoi antenati. L'attuale destinazione dell'evento cambia mentre event si propaga dall'oggetto all'oggetto tramite i vari phases del flusso di eventi. L'obiettivo evento corrente è il valore dell'attributo Event.currentTarget.

L'utilizzo di this all'interno di un listener di eventi è un modo comune (e standard) per ottenere il target dell'evento corrente.

Alcuni eventi hanno un tipo relatedTarget:

Utilizzato per identificare una secondaria EventTarget relativa a un evento di interfaccia utente, a seconda del tipo di evento.

fromElement e toElement sono IE modi non standard per ottenere la relatedTarget.