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.
There are five targets to consider:
Note: These properties are only available in Mozilla-based browsers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-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>
<td class="standard">Original target dispatching the event <small>event.target</small></td>
<td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
<td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
<td class="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>
<td class="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>
<td id="target"></td>
<td id="currentTarget"></td>
<td id="relatedTarget"></td>
<td id="explicitOriginalTarget"></td>
<td id="originalTarget"></td>
</tr>
</table>
<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget, and target</p>
<script>
function handleClicks(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;
}
function handleMouseover(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>
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.
Example
<hbox id="outer">
<hbox id="inner"
onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
</hbox>