onpropertychange Event | Internet Development Index |
Fires when a property changes on the object.
Syntax
Inline HTML <ELEMENT onpropertychange = "handler" ... > All platforms Event property object.onpropertychange = handler JScript only object.onpropertychange = GetRef("handler") Visual Basic Scripting Edition (VBScript) 5.0 or later 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 an event object for data.
altKey Sets or retrieves a value that indicates the state of the ALT key. altLeft Sets or retrieves 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 Sets or retrieves the object that fired the event. type Sets or retrieves the event name from the event object.
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.
Example
This example demonstrates how to use the onpropertychange event to determine the name and value of an updated property.
<HTML> <HEAD> <SCRIPT> 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"> </INPUT> <INPUT type=button id="oProp" onclick="changeProp()" value="Change property" onpropertychange="Results();"></P> <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> <INPUT type=button id="oStyleProp" onclick="changeCSSProp()" value="Change property" onpropertychange="Results();"> <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>
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
See Also
propertyName, srcElement