change | onchange event (Windows)

1 out of 2 rated this helpful - Rate this topic

Fires when the contents of the object or selection have changed.

Syntax

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

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

pEvtObj [in]: Type: IHTMLEventObj

Standards information

HTML 4.01 Specification, Section 18.2.3

Remarks

This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus.

The onchange event does not fire when the selected option of the select object is changed programmatically.

Changed text selection is committed.

To invoke this event, do one of the following:

Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.

Examples

This example uses the onchange event to retrieve the selected option of a select object.


<body>
<form>
  <p>Select a different option in the drop-down list box to trigger the onchange event.
  <select name="selTest" onchange="console.log('Index: ' + this.selectedIndex
     + '\nValue: ' + this.options[this.selectedIndex].value)">
  <option value="Books">Books</option>
  <option value="Clothing">Clothing</option>
  <option value="Housewares">Housewares</option>
  </select> </p>
</form>
</body>

change | onchange event