> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/change-event.md).

# "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](/web/html/element/input/radio-buttons.md)
  {% 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**](/web/html/element/input/radio-buttons.md), **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](/web/appendix/custom/helper-functions.md)
  {% endtab %}
  {% endtabs %}