Наші волонтери ще не переклали цю статтю мовою: Українська. Приєднайтесь до нас і допоможіть зробити це!
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.
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'change' in that specification. |
Living Standard | |
HTML5 The definition of 'change' in that specification. |
Recommendation | |
Document Object Model (DOM) Level 2 Events Specification The definition of 'change' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |