Home Library Learn Downloads Support Community
Sign in | United States - English | |
91 out of 97 rated this helpful Rate this topic

onpropertychange Event

.NET Framework 3.0

Fires when a property changes on the object.

Syntax

Inline HTML <ELEMENT onpropertychange = "handler(event);" >
Event Property object.onpropertychange = handler;
attachEvent object.attachEvent( "onpropertychange", handler); Internet Explorer only
Named script <SCRIPT FOR = object EVENT = onpropertychange> Internet Explorer only

Event Information

Bubbles No
Cancels No
To invoke Cause a property to change value.
Default action Sends notification when a property changes.

Event Object Properties

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query the event object for the following event properties.

Available Properties

altKey Gets a value that indicates the state of the ALT key.
altLeft Gets a value that indicates the state of the left ALT key.
ctrlLeft Sets or retrieves the state of the left CTRL key.
propertyName Sets or retrieves the name of the property that changes on the object.
shiftLeft Retrieves the state of the left SHIFT key.
srcElement Gets or sets the object that fired the event.
type Gets or sets the event name from the event object.

Refer to the specific event object for additional event properties.

Remarks

The onpropertychange event fires when properties of an object, expando, or style sub-object change. To retrieve the name of the changed property, use the event object's propertyName property. This property returns a read-only string of the name of the property that has changed. In the case of Cascading Style Sheets (CSS) properties, the property name is prefixed with style. For example, if the CSS property pixelLeft is altered, the value of window.event.propertyName is style.left. 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.

Note  Changing the innerText or innerHTML of child elements will not cause the onpropertychange event to fire for the parent element.

Example

This example demonstrates how to use the onpropertychange event to determine the name and value of an updated property.

Copy 

<html>

<head>
<script type="text/javascript">
function changeProp()
{
    oProp.value = sText.value;
}
function changeCSSProp()
{
    if(oSelect.selectedIndex==0) oStyleProp.style.color= "white";
    else oStyleProp.style.color = "black";
    oStyleProp.style.backgroundColor = oSelect.value;
}
function Results(){
    sSrc.innerText = event.srcElement.id;
    sProperty.innerText = event.propertyName;
}
</script>
</head>

<body>

<div style="background: #eeeeee; padding: 10px;">
	Click the button below to change its 'Value' property to the string specified 
	in the text box.<br><br>
	<input type="text" style="width: 250px" id="sText" value="Enter Some Text">
	&nbsp;
	<input type="button" id="oProp" onclick="changeProp()" value="Change property" onpropertychange="Results();">
	<p>Click the button below to change its 'backgroundColor' Cascading Style Sheet 
	(CSS) property to the color specified in the drop-down list box.<br>
	<select name="oSelect" style="width: 150px">
	    <option value="black" style="color: black">Black</option>
	    <option value="blue" style="color: blue">Blue</option>
	    <option value="green" style="color: green">Green</option>
	    <option value="red" style="color: red">Red</option>
	</select>&nbsp;
	<input type="button" id="oStyleProp" onclick="changeCSSProp()" value="Change property" onpropertychange="Results();"></p>
	<br><br>
	<div style="border: 1px solid #cccccc; width: 100%; padding: 10px; background: white;">
		<b>Source object:</b> <span id="sSrc" style="color: red;"></span><br>
		<b>Property Name:</b> <span id="sProperty" style="color: red;"></span>
	</div>
</div>
<br>
<br>

</body>

</html>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/onpropertychangeEX.htm

Standards Information

There is no public standard that applies to this event.

Applies To

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COMMENT, CUSTOM, DD, DFN, DIR, DIV, DL, document, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, Element Constructor, HTMLDocument Constructor

See Also

Did you find this helpful?
(2000 characters remaining)
Community Content Add
Annotations FAQ
RE: how to detect a change in disabled property
I was quite enthused to find a way to detect a change in the disabled property (to true in particular).  Unfortunately, the setExpression workaround is depreciated:

See http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx:

As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 (Quirks) mode or IE7 Standards mode. Microsoft Internet Explorer 5 offers an easy-to-use new feature that enables Web authors and developers to vastly improve the appearance and rendering of their Web pages. Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas. The formulas used in a dynamic property can reference property values from other elements, thereby allowing authors unique flexibility when designing their Web pages.

Important  Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons, as detailed in the IE blog entry titled Ending Expressions. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode. (For more information about document compatibility modes, see Defining Document Compatibility.) Because Internet Explorer 8 in IE8 mode is fully compliant with the Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) standard, most dynamic properties written to work around CSS-related shortcomings in previous versions of Internet Explorer should no longer be needed. Other dynamic properties with more specific uses can generally be replaced with standard JavaScript.
History
how to detect a change in disabled property

So onpropertychange doesn't fire in response to the disabled property, but it does fire in response to the style property, so all we have to do is associate a change in disabled state with a change in style, and we can do that using an expression :)


First add the expression, and associate the elements disabled property with a style property - anything will do, and it doesn't even need to change value. I used 'zoom' with a value '1':


element.style.setExpression('zoom', this.disabled ? '1' : '1')


Then simply define the onpropertychange handler to listen for the change:


element.onpropertychange = function()

{

if(event.propertyName == 'disabled')

{

alert('disabled property has changed');

}

};


It's a terrible hack of course, but everything in IE is a terrible hack :) Note that the onpropertychange will also fire when initially setting the expression, but the propertyName will bev 'style.zoom' so you can filter that out as indicated.

History
onpropertychange can not be used to detect property changes on disabled controls
  • onpropertychange fires after property has been changed
  • onpropertychange will not fire when setting disabled-property to true
  • no events fires from disabled objects

This makes it impossible to detect:

    • object disabled
    • all propertychanges on disabled objects
History