1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: Comparison of Event Targets
slug: Web/API/Event/Comparison_of_Event_Targets
tags:
- Event
translation_of: Web/API/Event/Comparison_of_Event_Targets
---
<p>{{ ApiRef() }}</p>
<h3 id="Event_targets" name="Event_targets">Event targets</h3>
<p>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.</p>
<p>There are 5 targets to consider:</p>
<table class="standard-table">
<tbody>
<tr>
<th>Property</th>
<th>Defined in</th>
<th>Purpose</th>
</tr>
<tr>
<td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
<td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface">DOM Event Interface</a></td>
<td>
<p>The DOM element on the lefthand side of the call that triggered this event, eg:</p>
<pre class="eval">
<em>element</em>.dispatchEvent(<em>event</em>)
</pre>
</td>
</tr>
<tr>
<td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
<td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface">DOM Event Interface</a></td>
<td>The <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> whose <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListeners</code></a> are currently being processed. As the event capturing and bubbling occurs this value changes.</td>
</tr>
<tr>
<td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
<td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
<td>Identifies a secondary target for the event.</td>
</tr>
<tr>
<td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
<td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
<td>{{ Non-standard_inline() }} 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 <code>.target</code> will show the parent and <code>.explicitOriginalTarget</code> will show the text node.<br>
Unlike <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> will never contain anonymous content.</td>
</tr>
<tr>
<td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
<td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
<td>{{ Non-standard_inline() }} The original target of the event, before any retargetings. See <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> for details.</td>
</tr>
</tbody>
</table>
<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Use of <code>explicitOriginalTarget</code> and <code>originalTarget</code></h3>
<p>TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?</p>
<h3 id="Examples" name="Examples">Examples</h3>
<pre><!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></pre>
<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Use of <code>target</code> and <code>relatedTarget</code></h3>
<p>The <code>relatedTarget</code> property for the <code>mouseover</code> event holds the node that the mouse was previously over. For the <code>mouseout</code> event, it holds the node that the mouse moved to.</p>
<table class="standard-table">
<tbody>
<tr>
<th>Event type</th>
<th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
<th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
</tr>
<tr>
<td><code>mouseover</code></td>
<td>the EventTarget which the pointing device entered</td>
<td>the EventTarget which the pointing device exited</td>
</tr>
<tr>
<td><code>mouseout</code></td>
<td>the EventTarget which the pointing device exited</td>
<td>the EventTarget which the pointing device entered</td>
</tr>
</tbody>
</table>
<p>TODO: Also needs descriptions about <code>dragenter</code> and <code>dragexit</code> events.</p>
<h4 id="Example" name="Example">Example</h4>
<pre class="eval"><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>
</pre>
<p> </p>
|
