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

by

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.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. What is event bubbling and capturing?
  4. How can I trigger a JavaScript event click
  5. The value of “this” within the handler using addEventListener
  6. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  7. How to get a word under cursor using JavaScript?
  8. Intercept page exit event
  9. Listening for variable changes in JavaScript
  10. React onClick function fires on render
  11. How can I get the destination URL for the onbeforeunload event?
  12. How to check whether dynamically attached event listener exists or not?
  13. Reading client side text file using Javascript
  14. Accessing an object’s property from an event listener call in JavaScript
  15. Enter key press behaves like a Tab in Javascript
  16. Detect mousemove when over an iframe?
  17. How to delay calling of javascript function?
  18. With form validation: why onsubmit=”return functionname()” instead of onsubmit=”functionname()”?
  19. How to detect in iOS webapp when switching back to Safari from background?
  20. link element onload
  21. Do Javascript promises block the stack
  22. Remove key press delay in Javascript
  23. Event Capturing vs Event Bubbling [duplicate]
  24. Detecting an image 404 in Javascript
  25. Emulate jQuery “on” with selector in pure Javascript
  26. JavaScript: SyntaxError: missing ) after argument list
  27. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  28. Is dispatchEvent a sync or an async function
  29. How to detect if user has enabled full screen in browser
  30. Display Spreadsheet Data to HTML Table

Leave a Comment