These properties are equivalent to JavaScript mouse events. JavaScript events traverse the DOM (called bubbling). target - the object to which the event was sent. currentTarget is the object on which the 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 in Dart, the concept is the same).
When you then click "Entry 2", your handler will be called (because the event "bubbles" before it). target will be the <li> element, and currentTarget will be the <ul> element. Which one you need to use depends on what you want to do in your handler - for example, you can hide "Entry 2" yourself using target or the entire list using currentTarget .
The element referenced by relatedTarget depends on the type of your MouseEvent - the list can be found here: event.relatedTarget . In the example above, this will be null because the click events do not have any related purpose.
Related MDN links: event.currentTarget , event.target
source share