Comparison of Event Targets

  • Revision slug: Web/API/Event/Comparison_of_Event_Targets
  • Revision title: Comparison of Event Targets
  • Revision id: 400217
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From DOM/event/Comparison_of_Event_Targets to Web/API/Event/Comparison_of_Event_Targets

Revision Content

{{ DomRef() }}

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 5 targets to consider:

Property Defined in Purpose
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 The 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 {{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }} {{ 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 .target will show the parent and .explicitOriginalTarget will show the text node.
Unlike .originalTarget, .explicitOriginalTarget will never contain anonymous content.
event.originalTarget {{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }} {{ Non-standard_inline() }} The original target of the event, before any retargetings. See Anonymous Content#Event_Flow_and_Targeting for details.

Use of explicitOriginalTarget and originalTarget

TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?

Examples

TODO: Add an example showing the difference between these different targets.

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.

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 about dragenter and dragexit events.

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>

 

Revision Source

<p>{{ DomRef() }}</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>
<p>TODO: Add an example showing the difference between these different targets.</p>
<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">
&lt;hbox id="outer"&gt;
  &lt;hbox id="inner"
        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
&lt;/hbox&gt;
</pre>
<p>&nbsp;</p>
Revert to this revision