Event targets
It's easy to get confused about which target to examine when writing an event handler. This article should clarify the use of the target properties.
There are five targets to consider:
| 特性 | Defined in | 目的 |
|---|---|---|
event.target
|
DOM Event Interface |
The DOM element on the lefthand side of the call that triggered this event, eg:
element.dispatchEvent(event) |
event.currentTarget
|
DOM Event Interface |
EventTarget
whose
EventListeners
are currently being processed. As the event capturing and bubbling occurs, this value changes.
|
event.relatedTarget
|
DOM MouseEvent Interface | Identifies a secondary target for the event. |
event.explicitOriginalTarget
|
Event.webidl |
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 (
bug 185889
), and in that case
.target
will show the parent and
.explicitOriginalTarget
will show the text node.
不像
.originalTarget
,
.explicitOriginalTarget
will never contain anonymous content.
|
event.originalTarget
|
Event.webidl | The original target of the event, before any retargetings. See Anonymous Content#Event_Flow_and_Targeting 了解细节。 |
| event.composedTarget | Event.webidl | The original non-native target of the event before composition from Shadow DOM. |
使用
explicitOriginalTarget
and
originalTarget
TODO: Only available in a Mozilla-based browser?
TODO: Only suitable for extension-developers?
范例
<!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 retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
<td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (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>
使用
target
and
relatedTarget
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.
| Event type | event.target | event.relatedTarget |
|---|---|---|
mouseover
|
the EventTarget which the pointing device entered | the EventTarget which the pointing device exited |
mouseout
|
the EventTarget which the pointing device exited | the EventTarget which the pointing device entered |
TODO:
Also needs descriptions for
dragenter
and
dragexit
事件。
范例
<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>
元数据
- 最后修改：