Windows apps
Collapse the table of content
Expand the table of content

propertychange | propertychange event

Fires when a property changes on the object.

Syntax

HTML Attribute <element onpropertychange = "handler(event)">
Event Property object.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.

Examples

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


<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
area
b
bdo
blockQuote
body
button
caption
cite
code
comment
custom
dd
div
dl
document
dt
em
embed
fieldSet
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
map
object
ol
option
p
pre
s
samp
script
select
small
span
strong
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
u
ul
var
Reference
propertyName
srcElement

 

 

Send comments about this topic to Microsoft

Build date: 11/26/2012

Show:
© 2016 Microsoft