JS 27 – Sự kiện: change, input, cut, copy, paste trong JavaScript

0
490

Xin chào các bạn, trong bài học ngày hôm nay, mình sẽ giới thiệu đến các bạn các sự kiện thường dùng trong JavaScript bao gồm: change, input, cut, copy, paste.

Change

Sự kiện change được kích hoạt khi phần tử đã thay đổi xong trạng thái của mình.

Đối với các dữ liệu đầu vào là văn bản có thì sự kiện change xảy ra khi nó blur.

Ví dụ: trong 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 (focus) ở một nơi khác, ví dụ, bấm vào một nút – sẽ có một sự kiện thay đổi:

Đối với các phần tử khác như: select, input type=checkbox/radio nó sẽ được kích hoạt ngay sau khi lựa chọn thay đổi.

Input

Sự kiện input kích hoạt mỗi khi một giá trị được sửa đổi.

Ví dụ:

Nếu chúng ta muốn xử lý mọi sửa đổi của một phần tử <input> thì sử dụng sự kiện này là lựa chọn tốt nhất.

Không giống như các sự kiện thao tác trên bàn phím, nó hoạt động nếu có bất kỳ thay đổi giá trị nào, ngay cả những thay đổi không liên quan đến thao tác bàn phím: paste bằng chuột hoặc sử dụng tính năng nhận dạng giọng nói để đọc văn bản.

Lưu ý: Không thể ngăn chặn bất cứ điều gì trong oninput
Sự kiện input xảy ra sau khi các giá trị được sửa đổi. Vì vậy, chúng ta không thể sử dụng event.preventDefault() ở đó.

Cut, copy và paste

Những sự kiện này xảy ra khi bạn cut/copy /paste một giá trị.

Chúng thuộc về class ClipboardEvent và cung cấp quyền truy cập vào dữ liệu được sao copy/paste.

Chúng ta cũng có thể sử dụng event.preventDefault() để hủy bỏ hành động.

Ví dụ: đoạn 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ố cut/copy /paste:

Về mặt kỹ thuật, chúng ta có thể copy/ paste mọi thứ. Ví dụ, chúng ta có thể sao chép một file trong trình quản lý file của hệ điều hành, và paste nó.

Hầu hết các trình duyệt cho phép người truy cập đọc / ghi vào clipboard nhưng chúng phải nằm trong phạm vi của người dùng và chúng thực sự an toàn. Ngoài ra, không được phép tạo các sự kiện clipboard “tùy chỉnh” trong tất cả các trình duyệt ngoại trừ Firefox.

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn các Sự kiện: change, input, cut, copy, paste trong JavaScript. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây