Fires when a property changes on the object.
| Inline |
<element onpropertychange = "handler" ... > |
| Script |
object.onpropertychange = handler |
| Bubbles |
No |
| Cancels |
No |
| To invoke |
Cause a property to change value. |
| Default action |
Sends notification when a property changes. |
This event is equivalent to the generic DOMAttrModified event as specified in the DOM Level 2 Event Model.
The onpropertychange event fires when any property of an object, expando, or style subobject change. The name of the property that has changed can be retrieved using the propertyName attribute of the event object.
propertyName returns a read-only string of the name of the property that has changed. In the case of style properties, the property name will be prefixed with style. For example, if the CSS property pixelLeft is altered, the value of window.event.propertyName is style.pixelLeft. By contrast, if the non-CSS property name is altered, the value of window.event.propertyName is name.
When the onpropertychange event fires, the srcElement property of the event object is set to the object whose property has changed.
While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.
Event Object Properties
| propertyName |
Returns the name of the property that has changed on the object. |
| srcElement |
Retrieves the object that fired the event. |
| type |
Retrieves the event name from the event object. |
The example demonstrates the use of onpropertychange, srcElement, and propertyName for both an object and a style subobject property.
Sample Code
<script language="JavaScript">
function chgProp ( ) {
oVal.value = "This is the new VALUE";}
function chgStyle ( ) {
oStyle.style.backgroundColor = "#369";}
</script>
</head>
<body>
<div align="center">
<input type=button id="oVal" onclick="chgProp()"
value="Click to change the VALUE of this button"
onpropertychange='alert("This " +
event.srcElement.tagName +
" has changed its "+event.propertyName)'>
<p></p>
<input type=button id="oStyle" onclick="chgStyle()"
value="Click to change the backgroundColor
of this button"
onpropertychange='alert("This " +
event.srcElement.tagName +
" has changed its "+event.propertyName)'></div>
</body>
Show me
propertyName, srcElement