HTMLElement: change event
The change
event is fired for <input>
, <select>
, and <textarea>
elements when an alteration to the element's value is committed by the user. Unlike the input
event, the change
event is not necessarily fired for each alteration to an element's value
.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | onchange |
Depending on the kind of element being changed and the way the user interacts with the element, the change
event fires at a different moment:
- When a
<input type="checkbox">
element is checked or unchecked (by clicking or using the keyboard); - When a
<input type="radio">
element is checked (but not when unchecked); - 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 committed (e.g., after editing the value of
<textarea>
or<input type="text">
).
The HTML specification lists the <input>
types that should fire the change
event.
Examples
<select> element
HTML
<label>Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>
JavaScript
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
Result
Text input element
For some elements, including <input type="text">
, the change
event doesn't fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.
HTML
<input placeholder="Enter some text" name="name"/>
<p id="log"></p>
JavaScript
const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('change', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Result
Specifications
Specification |
---|
HTML Standard # handler-onchange |
Browser compatibility
BCD tables only load in the browser
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 used to never fire a change
event in Gecko until the user hit Enter or switched the focus away from the <select>
(see bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.