What is the purpose the different *Target properties?

Question

In the MouseEvent class there are multiple *Target events:

• target
• currentTarget
• relatedTarget

What is their purpose in the context of a MouseEvent?

Answer 1

These properties are equivalent to the JavaScript mouse events. JavaScript events traverse the DOM (called "bubbling"). target is the object on which the event was originally dispatched on. currentTarget is the object on which your event handler has been attached.

Example

You have this HTML structure:

<ul id="list">
  <li>Entry 1</li>
  <li>Entry 2</li>
</ul>

and you add a click handler to the <ul> element (either via JavaScript or Dart, the concept is the same).

When you then click on "Entry 2", your click handler will be called (because the event "bubbles up" to it). target will be the <li> element, while currentTarget will be the <ul> element. Which one you have to use depends on what you want to do in your handler - for example, you could hide "Entry 2" itself by using target, or the whole list by using currentTarget.

The element referenced by relatedTarget depends on the type of your MouseEvent - a list can be found here: event.relatedTarget. In the above example, it would be null, because click events don't have any related target.

Related MDN links: event.currentTarget, event.target