It's easy to get confused about which event target to examine when writing an event handler. This article should clarify the use of the target properties.
Non-standard If the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. For example, mouse events are retargeted to their parent node when they happen over text nodes ([Webkit bug 185889](https://bugzil.la/185889)), and in that case .target will show the parent and .explicitOriginalTarget will show the text node. Unlike .originalTarget, .explicitOriginalTarget will never contain anonymous content.
Non-standard The original non-native target of the event before composition from Shadow DOM.
Use of explicitOriginalTarget and originalTarget
Note: These properties are only available in Mozilla-based browsers.
Examples
html
<!doctypehtml><htmllang="en-US"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>Comparison of Event Targets</title><style>table{border-collapse: collapse;height: 150px;width: 100%;}td{border: 1px solid #ccc;font-weight: bold;padding: 5px;min-height: 30px;}.standard{background-color: #99ff99;}.non-standard{background-color: #902d37;}</style></head><body><table><thead><tr><tdclass="standard">
Original target dispatching the event <small>event.target</small></td><tdclass="standard">
Target who's event listener is being processed
<small>event.currentTarget</small></td><tdclass="standard">
Identify other element (if any) involved in the event
<small>event.relatedTarget</small></td><tdclass="non-standard">
If there was a retargeting of the event for some reason
<small> event.explicitOriginalTarget</small> contains the target
before retargeting (never contains anonymous targets)
</td><tdclass="non-standard">
If there was a retargeting of the event for some reason
<small> event.originalTarget</small> contains the target before
retargeting (may contain anonymous targets)
</td></tr></thead><tr><tdid="target"></td><tdid="currentTarget"></td><tdid="relatedTarget"></td><tdid="explicitOriginalTarget"></td><tdid="originalTarget"></td></tr></table><p>
Clicking on the text will show the difference between
explicitOriginalTarget, originalTarget, and target
</p><script>functionhandleClicks(e){
document.getElementById("target").innerHTML = e.target;
document.getElementById("currentTarget").innerHTML = e.currentTarget;
document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
document.getElementById("explicitOriginalTarget").innerHTML =
e.explicitOriginalTarget;
document.getElementById("originalTarget").innerHTML = e.originalTarget;}functionhandleMouseover(e){
document.getElementById("target").innerHTML = e.target;
document.getElementById("relatedTarget").innerHTML = e.relatedTarget;}
document.addEventListener("click", handleClicks,false);
document.addEventListener("mouseover", handleMouseover,false);</script></body></html>
Use of target and relatedTarget
The relatedTarget property for the mouseover event holds the node that the mouse was previously over. For the mouseout event, it holds the node that the mouse moved to.