JavaScript: change event

The change event runs when a form control's value has been committed as a change by the user.

Minimal example

<label for="color">Color</label>
<select id="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>
<p id="message" aria-live="polite"></p>
<script>
document.querySelector("#color").addEventListener("change", event => {
  document.querySelector("#message").textContent = `Selected: ${event.target.value}`;
});
</script>

For text inputs, input usually fires on each edit, while change fires when the value is committed, often when the control loses focus. Selects, checkboxes, and radio buttons commonly fire change when the selection changes.

Common mistakes

• Use input when a live preview must update on every keystroke.
• Do not rely on a color-only visual change; provide text or an accessible status when the result matters.
• Read event.target.value inside the handler, and check that the target exists before registering the listener.