mozilla

Revision 103759 of Comparison of Event Targets

  • Revision slug: DOM/event/Comparison_of_Event_Targets
  • Revision title: Comparison of Event Targets
  • Revision id: 103759
  • Created:
  • Creator: Hamstersoup
  • Is current revision? No
  • Comment Created to reduce confusion about event targets

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.

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>
Revert to this revision