Redirected from En/DOM:event:Comparison of Event Targets
Comparison of Event Targets
Table of contents
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 | nsIDOMNSEvent.idl | The explicit original target of the event (Mozilla-specific) |
| event.originalTarget | 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?
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>
Page last modified 15:05, 16 Jun 2007 by Iamwriter?