HTMLElement: change event

The change event is fired for <input> , <select> , and <textarea> elements when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value .

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: for elements where the user's interaction is typing rather than selection, such as a <textarea> or the text , search , url , tel , email , or password types of the <input> element.

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

    Syntax

    Use the event name in methods like addEventListener() , or set an event handler property.

    js 

    addEventListener("change", (event) => {});
onchange = (event) => {};

    Event type

    A generic Event .

    Examples

    <select> element

    HTML

    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>