HTMLElement：change 事件
當用戶修改 <input>、<select> 和 <textarea> 元素的值時，會觸發 change 事件。與 input 事件不同，change 事件不一定會在元素 value 的每次更改時都觸發。
根據被更改元素的型別以及使用者與元素的互動方式，change 事件會在不同的時刻觸發：
- 當
<input type="checkbox">元素被選中或取消選中時（透過單擊或使用鍵盤）； - 當
<input type="radio">元素被選中時（但取消選中時不會）； - 當用戶明確提交更改時（例如，透過滑鼠單擊從
<select>的下拉列表中選擇一個值，為<input type="date">選擇一個日期，為<input type="file">選擇一個檔案等）； - 當元素的值被更改後失去焦點時：對於使用者透過輸入而非選擇進行互動的元素，例如
<textarea>或<input>元素中的text、search、url、tel、email或password型別。
HTML 規範列出了 應該觸發 change 事件的 <input> 型別。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("change", (event) => { })
onchange = (event) => { }
事件型別
一個通用的 Event。
示例
<select> 元素
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>
JavaScript
js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
result.textContent = `You like ${event.target.value}`;
});
結果
文字輸入元素
對於某些元素，包括 <input type="text">，change 事件直到控制元件失去焦點時才會觸發。請嘗試在下面的欄位中輸入一些內容，然後單擊其他地方以觸發事件。
HTML
html
<input placeholder="Enter some text" name="name" />
<p id="log"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
結果
規範
| 規範 |
|---|
| HTML # event-change |
| HTML # handler-onchange |
瀏覽器相容性
載入中…
不同瀏覽器在 change 事件是否應該為某些型別的互動觸發方面並不總是達成一致。例如，過去在 Gecko 中，使用 <select> 元素進行鍵盤導航時，在使用者按下 Enter 鍵或將焦點移出 <select> 之前，change 事件從未觸發（請參閱 Firefox bug 126379）。然而，自 Firefox 63 (Quantum) 起，所有主流瀏覽器中的此行為已保持一致。