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

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

target property (event)

Browser support:

9

Returns a reference to the object on which the event originally occurred.

In Internet Explorer before version 9, use the srcElement property for similar functionality.

Note that the object on which the event has occurred and the object on which the event listener was registered may be different. For example, if the user clicks on an element and an event listener for the onclick event is registered on the parent of the element, the listener function will be called (the onclick event bubbles up). In that case, the event is occurred on a child of the element on which the event listener was registered.
If you need the object on which the listener was registered, use the currentTarget property or the this keyword (inline event handlers) within the listener function. For further details, please see Example 1 and 2.

Note that in Firefox, the originalTarget property is identical, the explicitOriginalTarget property is similar to the target property. The explicitOriginalTarget property always retrieves the exact target object while the target property sometimes returns the parent element of the exact target object. For example, if a span element contains some text (in that case, the span element has a TextNode child) and an onclick event occurs within the span element, then the explicitOriginalTarget property retrieves the TextNode while the target property returns the span element as the target.

In case of activation and mouse move events, the fromElement, toElement and relatedTarget properties can also be useful. For example, the fromElement and relatedTarget properties retrieve the element that the mouse pointer left in case of the onmouseover event.

Syntax:

object.target;

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

This property is read-only.

Possible values:

Reference to the object on which the event originally occurred.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the srcElement and target properties:

<head>
    <script type="text/javascript">
        function ChangeColor (event) {
            var target = event.target ? event.target : event.srcElement;
                // if the click has occurred on a button
            if (target && target.nodeName.toLowerCase () == "button") {
                target.style.color = "#ff0000";
            }
        }
    </script>
</head>
<body>
    <div onclick="ChangeColor (event)">
        Clicking on this text does not modify the text color.
        Clicking on a button modify its text color.
        <br /><br />
        <button>Change my text color to red!</button>
        <button>Change my text color to red!</button>
        <button>Change my text color to red!</button>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it uses the this keyword instead of the srcElement and target properties:

<head>
    <script type="text/javascript">
        function ChangeColor (button) {
            button.style.color = "#ff0000";
        }
    </script>
</head>
<body>
    <div>
        Clicking on this text does not modify the text color.
        Clicking on a button modify its text color.
        <br /><br />
        <button onclick="ChangeColor (this)">Change my text color to red!</button>
        <button onclick="ChangeColor (this)">Change my text color to red!</button>
        <button onclick="ChangeColor (this)">Change my text color to red!</button>
    </div>
</body>