Comparison of Event Targets

  • Revision slug: DOM/event/Comparison_of_Event_Targets
  • Revision title: Comparison of Event Targets
  • Revision id: 103761
  • Created:
  • Creator: Gomita
  • Is current revision? No
  • Comment

Revision Content

{{template.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 Reference to the target to which the event was originally dispatched.
event.currentTarget DOM Event Interface Reference to the currently registered target for the event.
event.relatedTarget DOM MouseEvent Interface Identifies a secondary target for the event.
event.explicitOriginalTarget {{wiki.template('Named-source', [ "/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl" ])}} The explicit original target of the event (Mozilla-specific)
event.originalTarget {{wiki.template('Named-source', [ "/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl" ])}} The original target of the event, before any retargetings (Mozilla-specific).

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

relatedTarget for mouseover event makes possible to determine where the mouse came from, and for mouseout event we can determine where the mouse went 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>
{{template.DomRef()}}
</p>
<h3 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">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>Reference to the target to which the event was originally dispatched.
  </td></tr>
  <tr>
    <td><a href="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>Reference to the currently registered target for the event.</td>
  </tr>

  <tr>
    <td><a href="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">event.explicitOriginalTarget</a></td>
    <td>{{wiki.template('Named-source', [ "/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl" ])}}</td>
    <td>The explicit original target of the event <b>(Mozilla-specific)</b></td>
  </tr>
  <tr>
    <td><a href="en/DOM/event.originalTarget">event.originalTarget</a></td>
    <td>{{wiki.template('Named-source', [ "/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl" ])}}</td>
    <td>The original target of the event, before any retargetings <b>(Mozilla-specific)</b>.</td>
  </tr>

</tbody></table>
<h3 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 name="Examples"> Examples </h3>
<p>TODO: Add an example showing the difference between these different targets.
</p>
<h3 name="Use_of_target_and_relatedTarget"> Use of <code>target</code> and <code>relatedTarget</code> </h3>
<p><code>relatedTarget</code> for <code>mouseover</code> event makes possible to determine where the mouse came from, and for <code>mouseout</code> event we can determine where the mouse went to.
</p>
<table class="standard-table">
  <tbody><tr>
    <th>Event type</th>
    <th><a href="en/DOM/event.target">event.target</a></th>
    <th><a href="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 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>
Revert to this revision