onpropertychange

HTML (DHTML)

previous page next page

onpropertychange Event

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

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.

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.
Available Properties
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.

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

<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>&nbsp;
<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>&nbsp;
<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>

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

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