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

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

currentTarget property (event)

Browser support:

9

Returns a reference to the element whose event listener is being processed.

In other words, the currentTarget property retrieves the element on which the event listener was registered. In case of inline event handlers, the cross-browser this keyword provides identical functionality to the currentTarget property.
Note that the object on which the event has occurred and the object whose event listener is being processed may be different. See Example 1 and 2 for further details.

If you need the element on which the event originally occurred, see the pages for the explicitOriginalTarget, originalTarget, target and srcElement properties.

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

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

This property is read-only.

Possible values:

Reference to the element whose event listener is being processed.

Default: this property has no default value.

Example HTML code 1:

This example shows how to use the currentTarget property to check whether the element on which the event has occurred and the element on which the event was regitered are the same. For a cross-browser solution, please see the next example.

<head>
    <script type="text/javascript">
        function CheckTarget (event) {
            if (event.currentTarget) {
                var target = event.target ? event.target : event.srcElement;

                if (target == event.currentTarget) {
                    alert ("You have clicked on the blue field.");
                }
                else {
                    alert ("You have clicked on the button.");
                }
            }
            else {
                alert ("Your browser does not support the currentTarget property!");
            }
        }
    </script>
</head>
<body>
    <div onclick="CheckTarget (event);" style="width:300px; height:100px; background-color:#8080ff;">
        Click on this text and on the button next.
        <button>A simple button</button>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example uses the this keyword to implement a cross-browser solution for the previous example.

<head>
    <script type="text/javascript">
        function CheckTarget (event, div) {
            var target = event.target ? event.target : event.srcElement;

            if (target == div) {
                alert ("You have clicked on the blue field.");
            }
            else {
                alert ("You have clicked on the button.");
            }
        }
    </script>
</head>
<body>
    <div onclick="CheckTarget (event, this);" style="width:300px; height:100px; background-color:#8080ff;">
        Click on this text and on the button next.
        <button>A simple button</button>
    </div>
</body>