Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

propertychange | onpropertychange event

Fires when a property changes on the object.

Note  The onpropertychange event is only supported in conjunction with the legacy attachEvent IE-only event registration model, which has deprecated since Windows Internet Explorer 9 in favor of the W3C standard "addEventListener" event model.

Syntax

HTML Attribute <element onpropertychange = "handler(event)">
Event Property object.onpropertychange = handler;
attachEvent Method object.attachEvent("onpropertychange", handler)
addEventListener Method object.addEventListener("propertychange", handler, useCapture)

 

Event information

SynchronousNo
BubblesNo
CancelableNo

 

Event handler parameters

pEvtObj [in]

Type: IHTMLEventObj

Standards information

There are no standards that apply here.

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.

Sends notification when a property changes.

To invoke this event, do one of the following:

  • Cause a property to change value.

The pEvtObj parameter is required for the following interfaces:

Examples

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

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


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

See also

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=email
input type=file
input type=hidden
input type=image
input type=number
input type=password
input type=radio
input type=range
input type=reset
input type=search
input type=submit
input type=tel
input type=text
input type=url
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
Reference
propertyName
srcElement

 

 

Show:
© 2014 Microsoft