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
.
Event
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. |
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:
<input type="radio">
and <input type="checkbox">
;<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.);<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.
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: <select id="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="strawberry">Strawberry</option> <option value="vanilla">Vanilla</option> </select> </label>
The JavaScript code is simple:
document.addEventListener('DOMContentLoaded',function() { document.querySelector('select[name="ice-cream"]').onchange=changeEventHandler; },false); function changeEventHandler(event) { // You can use “this” to refer to the selected element. if(!event.target.value) alert('Please Select One'); else alert('You like ' + event.target.value + ' ice cream.'); }
The result looks like this:
Another, incomplete, example which may not work on all browsers, on JSFiddle: http://jsfiddle.net/nfakc/5/.
This event is also fired in several non-standard APIs:
NetworkInformation.connection
fires the change
event when the connection information changes.DeviceStorageChangeEvent
is triggered each time a file is created, modified, or deleted from the device storage system.Specification | Status | Comment |
---|---|---|
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. | Obsolete | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/Events/change