# "change" event

{% tabs %}
{% tab title="📘 手冊" %}
* HTMLElement ⟩ [change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) event
* [<**input** type="**checkbox**">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
* [<**input** type="**radio**">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
* <[**select**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)>
* [<**input** type="**date**">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
* [<**input** type="**file**">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
* [<**input** type="**text**">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)
* [<**textarea**>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
{% endtab %}

{% tab title="📦 元件" %}
* [Radio Buttons](../../html/element/input/radio-buttons)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
The **change** event is fired for [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) elements when an alteration to the element's value is **committed** (**entered**) by the user. Unlike the [**input**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event, the **change** event is **not** necessarily **fired** for **each alteration** to an element's **value**.
{% endhint %}

{% hint style="warning" %}
* "**change**" event：value 被**確認之後** (如：按 enter) 才會觸發的事件。
* "**input**" event：只要 value 發生改變就會觸發的事件。
{% endhint %}

## when "change" event fires

| 元件             | type                                                              | event                                                                                  |
| -------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| <**input**>    | [**radio**](../../html/element/input/radio-buttons), **checkbox** | click                                                                                  |
| <**input**>    | **date**, **file**                                                | select                                                                                 |
| <**select**>   |                                                                   | select                                                                                 |
| <**input**>    | **text**                                                          | element **loses focus** after its **value** was **changed**, but **not** **committed** |
| <**textarea**> |                                                                   | (same above)                                                                           |

## code example

{% tabs %}
{% tab title="js" %}
```javascript
const list = $('.ice-cream');

list.onchange = (e) => {
  const result = $('.result');
  result.textContent = `You like ${e.target.value}`;
};
```
{% endtab %}

{% tab title="html" %}
```markup
<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>
```
{% endtab %}

{% tab title="⬆️ 需要" %}
* [helper functions](../../appendix/custom/helper-functions)
{% endtab %}
{% endtabs %}
