onpropertychange Event

DHTML, HTML, & CSS

previous page next page

onpaste Event

onreadystatechange Event

DHTML Events

Web Workshop | DHTML, HTML & CSS

onpropertychange Event

Fires when a property changes on the object.

Syntax

Inline HTML <ELEMENTonpropertychange = "handler" ... > All platforms

Event property object.onpropertychange = handler JScript (compatible with ECMA 262 language specification) only

Named script <SCRIPT FOR = object EVENT = onpropertychange> Internet Explorer only

Inline HTML	<ELEMENTonpropertychange = "handler" ... >	All platforms
Event property	object.onpropertychange = handler	JScript (compatible with ECMA 262 language specification) only
Named script	<SCRIPT FOR = object EVENT = onpropertychange>	Internet Explorer only

Remarks

Bubbles No

Cancels No

To invoke Cause a property to change value.

Default action Sends notification when a property changes.

The onpropertychange event fires when object, expando, or style subobject properties change. You can retrieve the name of the changed property by using 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 style 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.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.

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, the handler can query the event object for data.
Event Object Properties

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

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

Example

This example shows how to use onpropertychange, srcElement, and propertyName for an object and a style subobject property to determine the name and value of an updated property.

Sample Code
<HEAD>
<SCRIPT>
function changeProp()
{
  oProp.value = "This is the new VALUE";
}

function changeCSSProp()
{
  oStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY ID=bdyChange>
<INPUT TYPE=button ID=oProp onclick="changeProp()"
   VALUE="Click to change the VALUE property of this button"
   onpropertychange='alert(event.srcElement.id + 
      " received a change to " + event.propertyName)'>
<INPUT TYPE=button ID=oStyleProp onclick="changeCSSProp()"
   VALUE="Click to change the CSS backgroundColor property 
      of this button"
   onpropertychange='alert(event.srcElement.id + 
      " received a change to " + event.propertyName)'>
</BODY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

[ Object Name ]

Platform Version

Win16:

Win32:

Mac:

Unix:

WinCE:

Version data is listed when the mouse hovers over a link, or the link has focus.

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