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 the element is :checked (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">).

The HTML specification lists the <input> types that should fire the change event.

Examples

Live example: 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>

JS

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
    const result = document.querySelector('.result');
    result.textContent = `You like ${event.target.value}`;
});

Result

Specifications

Specification Status
HTML Living Standard
The definition of 'change' in that specification.
Living Standard

Browser compatibility

No compatibility data found. Please contribute data for "api.HTMLElement.change_event" (depth: 1) to the MDN compatibility data repository.

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 fired 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.

See also