DHTML Events
Fires when the contents of the object or selection have changed.
| Inline HTML |
<element onchange = "handler" ... > |
All platforms |
| Event property |
object.onchange = handler |
ECMA-262 Language Specification |
| Named script |
<script FOR=object EVENT=onchange> |
Internet Explorer® only |
| Bubbles |
No |
| Cancels |
Yes |
| To invoke |
- 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.
|
| Default action |
Changed text selection is committed. |
A change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT type=text, SELECT, TEXTAREA element.
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.
On the SELECT object, this event does not fire programmatically when the selected attribute is changed from one OPTION to another.
While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.
Event Object Properties
| clientX |
Retrieves the x-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| clientX |
Returns the y-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| offsetX |
Retrieves the horizontal coordinate of the mouse's position relative to the object firing the event. |
| offsetX |
Retrieves the vertical coordinate of the mouse's position relative to the object firing the event. |
| returnValue |
Sets or retrieves the return value from the event. |
| screenX |
Retrieves the horizontal position of the mouse, in pixels, relative to the user's screen. |
| screenY |
Retrieves the vertical position of the mouse, in pixels, relative to the user's screen. |
| srcElement |
Retrieves the object that fired the event. |
| type |
Retrieves the event name from the event object. |
| x |
Returns the horizontal position of the mouse when the event fires. |
| y |
Returns the vertical position of the mouse when the event fires. |
The example below shows how the onchange event works on the SELECT object.
Sample Code
<body>
<div align="center">
<form>
<select name=options onchange="alert(
'You have selected '+value+'.')">
<option value="none">— Select —
<option value="Books">Books
<option value="Clothing">Clothing
<option value="Houseware">Houseware</select>
</form>
</div>
</body>
Show me
The following example shows use of the onchange event to trigger the function checkNum that checks for a range of values. If the value of the INPUT element is not within the valid range, the focus and select methods are used to set focus back to and highlight the INPUT. Otherwise, it calls the function thanks.
Sample Code
