change

The change event is used by the HTML DOM API in two scenarios:

• It's 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.
• It's fired at AudioTrackList, VideoTrackList, and TextTrackList objects when one or more of the object’s tracks are enabled or disabled.

General info

Specification

HTML Living Standard
The definition of 'change (for form controls)' in that specification.
HTML Living Standard
The definition of 'change (for track lists)' in that specification.

Interface

Event

Bubbles

Yes, (for the event that’s fired at form controls at least)

Cancelable

No

Target

Element, HTMLElement, HTMLSelectElement, HTMLTextareaElement
AudioTrackList, VideoTrackList, TextTrackList

Default Action

None

Properties

Inherits properties from the Event interface, its parent.

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 :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">).

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 for user input

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

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!