In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > relatedTarget (event)

relatedTarget property (event)

Browser support:

9

Returns a reference to the related element in case of onmouseover, onmouseout, dragenter and dragexit events.

For example,

in case of onmouseover event, the relatedTarget property retrieves the element that the mouse pointer left,
and in case of onmouseout event, the relatedTarget property retrieves the element that the mouse pointer entered.

You can use the fromElement and toElement properties for similar functionality in Internet Explorer, Opera, Google Chrome and Safari.

The fromElement, toElement and relatedTarget properties can only be used for activation and mouse move events. In general, if you need the object on which an event occurred, use the target and srcElement properties. If you need the element on which the event listener was registered, use the currentTarget property.

Syntax:

object.relatedTarget;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Retrieves a reference to the related element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the relatedTarget property:

<head>
    <script type="text/javascript">
        function OnMouseOver (event) {
            var from = event.relatedTarget ? event.relatedTarget : event.fromElement;
            var to = event.target ? event.target : event.toElement;

            if (from && ('checked' in from)) {
                from.checked = false;
            }
            if (to && ('checked' in to)) {
                to.checked = true;
            }
        }
    </script>
</head>
<body>
    Move the mouse over the check box items!
    <table>
        <tr>
            <td onmouseover="OnMouseOver (event);" style="background-color:#e0a0f0; padding:30px;">
                <input type="checkbox"/>&nbsp;<input type="checkbox"/>&nbsp;<input type="checkbox"/>
                <br />
                <input type="checkbox"/>&nbsp;<input type="checkbox"/>&nbsp;<input type="checkbox"/>
                <br />
                <input type="checkbox"/>&nbsp;<input type="checkbox"/>&nbsp;<input type="checkbox"/>
            </td>
        </tr>
    </table>
</body>