What is the difference between Event.target, Event.toElement and Event.srcElement?

Question

I have the following code:

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

By right-clicking on the <div class="foo"></div> , return this:

div.foo, div.foo, div.foo

By right-clicking on the <input> , return this:

input, input, input

Everyone seems to bring the same result. Is there a situation where one of them has a different application than the others?

Answer 1

An event object is an element to which an event is sent:

The object to which the event is bound using the DOM event stream . The purpose of the event is the value of the Event.target attribute.

srcElement is a non-standard IE way to get target .

the current target is the element in which the event listener is currently being called:

In the event stream, the current event target is associated with the object with the event handler that is currently being dispatched. This object MAY be the purpose of the event itself or one of its ancestors. The current purpose of the event changes as event propagates from object to object through the various phases of the event flow. The purpose of the current event is the value of Event.currentTarget .

Using this inside an event listener is a common (and standard) way to get the current target of an event.

Some events have relatedTarget :

Used to identify the secondary EventTarget associated with the user interface event, depending on the type of event.

fromElement and toElement are IE non-standard ways to get relatedTarget .