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

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

toElement property (event)

Browser support:

Returns a reference to the object that the mouse pointer entered.

This property can be used for the onmouseenter, onmouseleave, onmouseout and onmouseover events.

The pair of the toElement property is the fromElement property. For example, in case of onmouseover and onmouseout events, the fromElement property retrieves the element that the mouse pointer left and the toElement property retrieves the element that the mouse pointer entered.

You can use the relatedTarget property for similar functionality in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9.

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.toElement;

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 toElement 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>