Cafedev chia sẻ về các sự kiện khác nhau đi kèm với cập nhật dữ liệu.
Nội dung chính
1. Sự kiện: thay đổi
Sự kiện change kích hoạt khi phần tử đã thay đổi xong.
Đối với đầu vào(input) văn bản có nghĩa là sự kiện xảy ra khi nó mất tiêu điểm.
Ví dụ: khi chúng ta đang nhập vào trường văn bản bên dưới – không có sự kiện nào. Nhưng khi chúng ta di chuyển tiêu điểm đến một nơi khác, chẳng hạn, nhấp vào một nút – sẽ có một sự kiện change:
<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">Đối với các yếu tố khác: select, input type=checkbox/radio nó gây nên ngay sau khi thay đổi lựa chọn:
<select onchange="alert(this.value)">
<option value="">Select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>2. Sự kiện: input
Sự kiện input này sẽ kích hoạt mọi lúc sau khi một giá trị được người dùng sửa đổi.
Không giống như các sự kiện bàn phím, nó kích hoạt bất kỳ thay đổi giá trị nào, ngay cả những thay đổi không liên quan đến thao tác trên bàn phím: dán bằng chuột hoặc sử dụng nhận dạng giọng nói để đọc chính tả văn bản.
Ví dụ:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>Nếu chúng ta muốn xử lý mọi sửa đổi của một < input > thì sự kiện này là lựa chọn tốt nhất.
Mặt khác, sự kiện input không kích hoạt khi nhập bằng bàn phím và các hành động khác không liên quan đến thay đổi giá trị, ví dụ: nhấn các phím mũi tên ⇦ ⇨khi đang nhập.
Không thể ngăn cản bất cứ điều gì trong oninput
Sự kiện input xảy ra sau khi giá trị được sửa đổi.
Vì vậy, chúng ta không thể sử dụng event.preventDefault() ở đó – chỉ là quá muộn, sẽ không có tác dụng.
3. Sự kiện: cắt, sao chép, dán
Những sự kiện này xảy ra khi cắt / sao chép / dán một giá trị.
Chúng thuộc lớp ClipboardEvent và cung cấp quyền truy cập vào dữ liệu được sao chép / dán.
Chúng ta cũng có thể sử dụng event.preventDefault() để hủy bỏ hành động, sau đó không có gì được sao chép / dán.
Ví dụ: code bên dưới ngăn chặn tất cả các sự kiện như vậy và hiển thị những gì chúng ta đang cố gắng cắt / sao chép / dán:
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(event) {
alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
return false;
};
</script>Xin lưu ý rằng có thể sao chép / dán không chỉ văn bản mà còn mọi thứ. Ví dụ: chúng ta có thể sao chép một tệp trong trình quản lý tệp hệ điều hành và dán nó.
Có một danh sách các phương thức trong đặc tả có thể hoạt động với các kiểu dữ liệu khác nhau bao gồm tệp, đọc / ghi vào khay nhớ tạm.
Nhưng xin lưu ý rằng khay nhớ tạm là thứ cấp hệ điều hành “toàn cầu”. Hầu hết các trình duyệt chỉ cho phép truy cập đọc / ghi vào khay nhớ tạm trong phạm vi hành động nhất định của người dùng vì sự an toàn, ví dụ như trong trình xử lý sự kiện onclick.
Ngoài ra, nó bị cấm tạo các sự kiện khay nhớ tạm “tùy chỉnh” dispatchEvent trong tất cả các trình duyệt ngoại trừ Firefox.
4. Tóm lược
Sự kiện thay đổi dữ liệu:
| Biến cố | Sự miêu tả | Đặc biệt |
| change | Một giá trị đã được thay đổi. | Đối với đầu vào văn bản gây ra hiện tượng mất nét. |
| input | Đối với đầu vào văn bản trên mọi thay đổi. | Kích hoạt ngay lập tức không giống như change. |
| cut/copy/paste | Cắt / sao chép / dán các hành động. | Hành động có thể được ngăn chặn. Các event.clipboardData cung cấp cho đọc / ghi truy cập vào clipboard. |
Nguồn và tài liệu tiếng anh tham khảo:
Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
