Revision 1127817 of change

<p>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user. Unlike the {{event("input")}} event, the <code>change</code> event is not necessarily fired for each change to an element's <code>value</code>.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
 <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
 <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">Element</dd>
 <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
 <dd style="margin: 0 0 0 120px;">undefined</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p>{{OpenEventProperties()}}{{CloseEventProperties()}}</p>

<h2 id="Description">Description</h2>

<p>Depending on the kind of form element being changed and the way the user interacts with the element, the <code>change</code> event fires at a different moment:</p>

<ul>
 <li>When the element is activated (by clicking or using the keyboard) for <code>&lt;input type="radio"&gt;</code> and <code>&lt;input type="checkbox"&gt;</code>;</li>
 <li>When the user commits the change explicitly (e.g. by selecting a value from a {{HTMLElement("select")}}'s dropdown with a mouse click, by selecting a date from a date picker for <code>&lt;input type="date"&gt;</code>, by selecting a file in the file picker for <code>&lt;input type="file"&gt;</code>, etc.);</li>
 <li>When the element loses focus after its value was changed, but not commited (e.g. after editing the value of {{HTMLElement("textarea")}} or <code>&lt;input type="text"&gt;</code>).</li>
</ul>

<p>Different browsers do not always agree whether a <code>change</code> event should be fired for certain types of interaction. For example, keyboard navigation in {{HTMLElement("select")}} elements never fires a <code>change</code> event in Gecko until the user hits Enter or switches the focus away from the <code>&lt;select&gt;</code> (see {{bug("126379")}}).</p>

<p>The HTML specification lists <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply" title="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">the <code>&lt;input&gt;</code> types that should fire the <code>change</code> event</a>.</p>

<h2 id="Examples">Examples</h2>

<p>An incomplete example, which probably doesn't work on all browsers, on jsfiddle: <a href="https://jsfiddle.net/nfakc/5/" title="https://jsfiddle.net/nfakc/5/">https://jsfiddle.net/nfakc/5/</a>.</p>

<h3 id="Example_Change_event_on_a_select">Example: Change event on a <code>select</code></h3>

<p>The following code handles the <code>change</code> event on a {{HTMLElement("select")}} by calling the <code>changeEventHandler()</code> function in the <code>onchange</code> attribute. It reads the value of the event target and shows it in an alert.</p>

<pre class="brush: html">
&lt;label&gt;Choose an ice cream flavor: &lt;/label&gt;
&lt;select size="1" onchange="changeEventHandler(event);"&gt;
  &lt;option&gt;chocolate&lt;/option&gt;
  &lt;option&gt;strawberry&lt;/option&gt;
  &lt;option&gt;vanilla&lt;/option&gt;
&lt;/select&gt;
</pre>

<p>The JavaScript code is simple:</p>

<pre class="brush: js">
function changeEventHandler(event) {
  alert('You like ' + event.target.value + ' ice cream.');
}</pre>

<p>The result looks like this:</p>

<p>{{ EmbedLiveSample('Example_Change_event_on_a_select', '', '', '', 'Web/Events/change') }}</p>

<h2 id="See_also">See also</h2>

<p>This event is also fired in several non-standard APIs:</p>

<ul>
 <li>{{domxref("NetworkInformation.connection")}} fires the <code>change</code> event when the connection information changes.</li>
 <li>{{domxref("DeviceStorageChangeEvent")}} is triggered each time a file is created, modified, or deleted from the device storage system.</li>
</ul>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<p>According to&nbsp;<a href="https://www.quirksmode.org/dom/events/">QuirksMode</a>&nbsp;Chrome and Firefox have been compatible for some time, but IE9 and earlier versions of IE10 have incomplete support.</p>