"change" event

📘 手冊

• HTMLElement ⟩ change event

• <input type="checkbox">

• <input type="radio">

• <select>

• <input type="date">

• <input type="file">

• <input type="text">

• <textarea>

📦 元件

• Radio Buttons

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

• "change" event：value 被確認之後 (如：按 enter) 才會觸發的事件。

• "input" event：只要 value 發生改變就會觸發的事件。

when "change" event fires

元件	type	event
<input>	radio, 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

js

const list = $('.ice-cream');

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

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>

⬆️ 需要

• helper functions