This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

propertychange

Overview Table

Synchronous No
Bubbles No
Target dom/Element
Cancelable No
Default action ?
## 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>

View live example

Notes

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

  • HTMLAnchorEvents2
  • HTMLAreaEvents2
  • HTMLButtonElementEvents2
  • HTMLControlElementEvents2
  • HTMLDocumentEvents2
  • HTMLElementEvents2
  • HTMLFormElementEvents2
  • HTMLImgEvents2
  • HTMLFrameSiteEvents2
  • HTMLInputFileElementEvents2
  • HTMLInputImageEvents2
  • HTMLInputTextElementEvents2
  • HTMLLabelEvents2
  • HTMLLinkElementEvents2
  • HTMLMapEvents2
  • HTMLMarqueeElementEvents2
  • HTMLObjectElementEvents2
  • HTMLOptionButtonElementEvents2
  • HTMLScriptEvents2
  • HTMLSelectElementEvents2
  • HTMLStyleElementEvents2
  • HTMLTableEvents2
  • HTMLTextContainerEvents2
  • HTMLWindowEvents2

Syntax

Standards information

There are no standards that apply here.

Event handler parameters

pEvtObj [in]
Type: ****IHTMLEventObj****

Attributions