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

You are here: Reference > JavaScript > client-side > event handling > events > onpropertychange

onpropertychange event | propertychange event

Browser support:

Occurs every time when the value of an element's property is changed.

The value of a property can be modified directly by script or indirectly through the user interface. For example:

when the checked state of an input:checkbox or input:radio element is modified, the CHECKED property is changed
when the contents of an input:text or textarea element are modified, the value property is changed
when the selection in a select element is modified, the selectedIndex property is changed.

The onpropertychange event is fired in both (the direct and the indirect) cases. You can use the propertyName property of the event object in the event handlers for the onpropertychange event to get the name of the modified property.

To get similar functionality in Firefox and Opera (and in Internet Explorer from version 9), use the DOMAttrModified event. It fires when a property is added, modified or removed by script, but it does not fire when the modification was made through the user interface. See the examples below for details.

The onpropertychange event is buggy in Internet Explorer 9. It is not fired when characters are deleted from a text field (such as input:text and textarea) through the user interface only when characters are inserted. Although the oninput event is supported in Internet Explorer from version 9, but similarly to the onpropertychange event, it is also buggy, it is not fired on deletion. Another similar event is the cross-browser onchange event, but it occurs after the element loses the focus, not immediately after the modification.

Since characters can be deleted in several ways (Backspace and Delete keys, CTRL + X, Cut and Delete command in context menu), there is no good solution to detect all changes. If characters are deleted by the Delete command of the context menu, the modification cannot be detected in JavaScript in Internet Explorer 9.

Although the addEventListener method is supported by Internet Explorer from version 9, but it does not work for the propertychange event. If you want to register a listener for the onpropertychange event, use the attachEvent method instead.

How to register:

In HTML:

In JavaScript:

object.onpropertychange = handler;

object.attachEvent ("onpropertychange", handler);

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

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	-

Actions that invoke the onpropertychange event:

Modifying the checked state, the selection or the contents of an element.
Changing the value of a property from JavaScript.

Example HTML code 1:

This example illustrates the use of the onpropertychange event for that case when a property is modified through the user interface:

<head>
    <script type="text/javascript">
        function OnPropModified () {
            if ('propertyName' in event) {  // Internet Explorer
                alert ("The " + event.propertyName + " property of the "
                        + event.srcElement.tagName + " element has been changed.");
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Modify the checked state, the selected item or the contents of the controls below!
    <br /><br />
    <input type="checkbox" onpropertychange="OnPropModified ()" />Sample check box
    <br /><br />
    <select onpropertychange="OnPropModified ()">
        <option>First item</option>
        <option>Second item</option>
        <option>Third item</option>
    </select>
    <br /><br />
    <textarea onpropertychange="OnPropModified ()">Some initial text.</textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to use the oninput and onpropertychange events to detect when the contents of an input:text element is changed. Both the oninput and onpropertychange events are supported in Internet Explorer 9, but both of them are buggy. They are not fired when characters are deleted only when inserted. For further details, please see the description on the top of this page.

<head>
    <script type="text/javascript">
            // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
            // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
        
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to use the oninput, onpropertychange and textInput events to detect when the contents of a textarea element is changed. Both the oninput and onpropertychange events are buggy in Internet Explorer 9, they are not fired when characters are deleted only when inserted.

<head>
    <script type="text/javascript">
        function Init () {
            var textarea = document.getElementById ("textarea");

            if (textarea.addEventListener) {    // all browsers except IE before version 9
                textarea.addEventListener ("input", OnInput, false);
                    // Google Chrome and  Safari
                textarea.addEventListener ("textInput", OnTextInput, false);
                    // Internet Explorer from version 9
                textarea.addEventListener ("textinput", OnTextInput, false);
            }
            
            if (textarea.attachEvent) { // Internet Explorer and Opera
                textarea.attachEvent ("onpropertychange", OnPropChanged);   // Internet Explorer
            }
        }

            // Google Chrome, Safari and Internet Explorer from version 9
        function OnTextInput (event) {
            alert ("The following text has been entered: " + event.data);
        }
            // Firefox, Google Chrome, Opera, Safari from version 5, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
            // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
        
    </script>
</head>
<body onload="Init ();">
    Please modify the contents of the text field.
    <textarea id="textarea">Textarea</textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates the use of the onpropertychange and DOMAttrModified events for that case when a property is modified by script:

<head>
    <script type="text/javascript">
        function InitListener () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.addEventListener) { // all browsers except IE before version 9
                elemToCheck.addEventListener ('DOMAttrModified', OnAttrModified, false);    // Firefox, Opera, IE
            }
            if (elemToCheck.attachEvent) {  // Internet Explorer and Opera
                elemToCheck.attachEvent ('onpropertychange', OnAttrModified);   // Internet Explorer
            }
        }

        function OnAttrModified (event) {
            var message = "";
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
                switch (event.attrChange) {
                case MutationEvent.MODIFICATION:
                    message += "The value of the " + event.attrName + " attribute has been changed from "
                                + event.prevValue + " to " + event.newValue + ".";
                    break;
                case MutationEvent.ADDITION:
                    message += "The " + event.attrName + " attribute has been added to the element "
                                + "with the value of " + event.newValue + ".";
                    break;
                case MutationEvent.REMOVAL:
                    message += "The " + event.attrName + " attribute has been removed from the element."
                                + "The value was " + event.prevValue + " previously.";
                    break;
                };
            }

            if ('propertyName' in event) {  // Internet Explorer
                message = "The " + event.propertyName + " property of the "
                           + event.srcElement.tagName + " element has been changed.";
            }

            alert (message);
        }

        function ModifyAlign () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.align == "right")
                elemToCheck.align = "left";
            else
                elemToCheck.align = "right";
        }

        function ModifyBackgroundColor () {
            var elemToCheck = document.getElementById ("myDiv");
            elemToCheck.style.backgroundColor = "#aaccee";
        }

        function CreateModifyRemoveAttr () {
            var elemToCheck = document.getElementById ("myDiv");
                // when an attribute is created, the onpropertychange event is not fired
            elemToCheck.setAttribute ("newAttr" , "firstValue");
                // when the value of an attribute is modified, the onpropertychange event is fired
            elemToCheck.setAttribute ("newAttr" , "secondValue");
                // when an attribute is removed, the onpropertychange event is not fired
            elemToCheck.removeAttribute ("newAttr");
        }
    </script>
</head>
<body onload="InitListener ();">
    <div id="myDiv" style="background-color:#e0c0a0;">
        The alignment can be modified with the first button<br />
        The background color can be changed with the second button<br />
        Finally, with the third button you can create, modify and remove an attribute.
    </div>
    <br /><br />
    <button onclick="ModifyAlign ();">Modify the alignment</button><br />
    <button onclick="ModifyBackgroundColor ();">Modify the color of the background</button><br />
    <button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>