Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil) . Junte-se a nós e ajude a fazer o trabalho!
The change
event is fired for <input>
, <select>
, and <textarea>
elements when a change to the element's value is committed by the user. Unlike the input
event, the change
event is not necessarily fired for each change to an element's value
.
General info
- Specification
- HTML5
- Interface
Event
- Bubbles
- Yes
- Cancelable
- No
- Target
- Element
- Default Action
- undefined
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
Description
Depending on the kind of form element being changed and the way the user interacts with the element, the change
event fires at a different moment:
- When the element is activated (by clicking or using the keyboard) for
<input type="radio">
and<input type="checkbox">
; - When the user commits the change explicitly (e.g. by selecting a value from a
<select>
's dropdown with a mouse click, by selecting a date from a date picker for<input type="date">
, by selecting a file in the file picker for<input type="file">
, etc.); - When the element loses focus after its value was changed, but not commited (e.g. after editing the value of
<textarea>
or<input type="text">
).
Different browsers do not always agree whether a change
event should be fired for certain types of interaction. For example, keyboard navigation in <select>
elements never fires a change
event in Gecko until the user hits Enter or switches the focus away from the <select>
(see bug 126379).
The HTML specification lists the <input>
types that should fire the change
event.
Examples
An incomplete example, which probably doesn't work on all browsers, on jsfiddle: https://jsfiddle.net/nfakc/5/.
Example: Change event on a select
The following code handles the change
event on a <select>
by calling the changeEventHandler()
function in the onchange
attribute. It reads the value of the event target and shows it in an alert.
<label>Choose an ice cream flavor: </label> <select size="1" onchange="changeEventHandler(event);"> <option>chocolate</option> <option>strawberry</option> <option>vanilla</option> </select>
The JavaScript code is simple:
function changeEventHandler(event) { alert('You like ' + event.target.value + ' ice cream.'); }
The result looks like this:
See also
This event is also fired in several non-standard APIs:
NetworkInformation.connection
fires thechange
event when the connection information changes.DeviceStorageChangeEvent
is triggered each time a file is created, modified, or deleted from the device storage system.
Browser compatibility
According to QuirksMode Chrome and Firefox have been compatible for some time, but IE9 and earlier versions of IE10 have incomplete support.