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

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

srcElement property (event)

Browser support:

Retrieves a reference to the object on which the event occurred.

The target property can be used for similar functionality in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9.

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.

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

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 object on which the event 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 similar to the previous one, but it uses the this keyword to pass the element on which the event listener was registered:

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