I have the following code:
document.oncontextmenu = function(evt) { evt = evt || window.event; console.log(evt.target, evt.toElement, evt.srcElement); };
By clicking the right mouse button on a <div class="foo"></div>
, returns this:
div.foo, div.foo, div.foo
By clicking the right mouse button on a <input>
, returns this:
input, input, input
All seem to bring the same result. Is there any situation that one of them has different use than the others?
target is the root element that raised the event. currentTarget is the element handling the event.
Browser support: Returns a reference to the object that the mouse pointer entered. This property can be used for the onmouseenter, onmouseleave, onmouseout and onmouseover events.
Definition and Usage The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.
Whereas target refers to the specific element that actually triggered the event, which in this case is the button element inside the p element. So in this video this and event. target points to the same element, the button element.
The event target is the element to which the event is dispatched:
The object to which an event is targeted using the DOM event flow. The event target is the value of the
Event.target
attribute.
srcElement
is a IE non-standard way to obtain the target
.
The current event target is the element which has the event listener which is currently invoked:
In an event flow, the current event target is the object associated with the event handler that is currently being dispatched. This object MAY be the event target itself or one of its ancestors. The current event target changes as the event propagates from object to object through the various phases of the event flow. The current event target is the value of the
Event.currentTarget
attribute.
Using this
inside an event listener is a common (and standard) way to obtain the current event target.
Some kind events have a relatedTarget
:
Used to identify a secondary
EventTarget
related to a UI event, depending on the type of event.
fromElement
and toElement
are IE non-standard ways to obtain the relatedTarget
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With