HTMLElement: sự kiện change
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Sự kiện change được kích hoạt với các phần tử <input>, <select> và <textarea> khi người dùng thay đổi giá trị của phần tử. Không giống sự kiện input, sự kiện change không nhất thiết được kích hoạt sau mỗi lần thay đổi giá trị của phần tử.
Tùy thuộc vào loại phần tử và cách người dùng tương tác, sự kiện change sẽ kích hoạt vào các thời điểm khác nhau:
- Khi phần tử
<input type="checkbox">được chọn hoặc bỏ chọn (bằng cách nhấp hoặc dùng bàn phím); - Khi phần tử
<input type="radio">được chọn (nhưng không phải khi bỏ chọn); - Khi người dùng xác nhận thay đổi một cách rõ ràng (ví dụ: chọn một giá trị từ danh sách thả xuống của
<select>bằng chuột, chọn ngày từ bộ chọn ngày cho<input type="date">, chọn tệp trong trình chọn tệp cho<input type="file">, v.v.); - Khi phần tử mất tiêu điểm sau khi giá trị thay đổi: đối với các phần tử mà tương tác của người dùng là nhập chữ thay vì chọn, chẳng hạn như
<textarea>hoặc kiểutext,search,url,tel,email, hoặcpasswordcủa phần tử<input>.
Đặc tả HTML liệt kê các loại <input> sẽ kích hoạt sự kiện change.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("change", (event) => { })
onchange = (event) => { }
Loại sự kiện
Một Event chung.
Ví dụ
Phần tử <select>
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
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
result.textContent = `You like ${event.target.value}`;
});
Kết quả
Phần tử nhập văn bản
Đối với một số phần tử, bao gồm <input type="text">, sự kiện change không kích hoạt cho đến khi điều khiển mất tiêu điểm. Hãy thử nhập nội dung vào trường bên dưới, rồi nhấp vào nơi khác để kích hoạt sự kiện.
HTML
<input placeholder="Enter some text" name="name" />
<p id="log"></p>
JavaScript
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # event-change |
| HTML # handler-onchange |
Tương thích trình duyệt
Các trình duyệt khác nhau không luôn đồng ý về việc có nên kích hoạt sự kiện change cho một số loại tương tác nhất định hay không. Ví dụ: điều hướng bàn phím trong các phần tử <select> trước đây không bao giờ kích hoạt sự kiện change trong Gecko cho đến khi người dùng nhấn Enter hoặc chuyển tiêu điểm khỏi <select> (xem Firefox bug 126379). Từ Firefox 63 (Quantum), hành vi này đã nhất quán giữa tất cả các trình duyệt chính.