JS 28 – Mouse Event trong JavaScript.

0
284

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 Mouse Event cơ bản trong JavaScript..

Sự kiện với chuột không chỉ đến từ “người thao tác chuột”, mà còn được mô phỏng trên thiết bị cảm ứng, để làm cho chúng tương thích.

Trong bài này, chúng ta sẽ tìm hiểu thêm chi tiết về các sự kiện chuột và thuộc tính của chúng.

Các loại mouse event

Chúng ta có thể chia các mouse event thành hai loại: “đơn giản” và “phức tạp”:

Sự kiện đơn giản:

Các sự kiện đơn giản được sử dụng nhiều nhất là:

  • mousedown/mouseup : khi bạn nhấp/nhả chuột đối với một phần tử.
  • mouseover/mouseout: Con trỏ chuột đi qua/ra khỏi một phần tử.
  • mousemove: Mọi di chuyển chuột qua một phần tử sẽ kích hoạt sự kiện này.

Sự kiện phức tạp:

  • click: Khi người dùng click vào một phần tử trên trang sẽ kích hoạt sự kiện này.
  • contextmenu: Kích hoạt sau khi người dùng click chuột phải vào phần tử.
  • dblclick: Kích hoạt khi người dùng nháy đúp vào phần tử.

Các sự kiện phức tạp được tạo thành từ những sự kiện đơn giản, vì vậy về lý thuyết chúng ta có thể làm việc với các sự kiện mà không có chúng. Nhưng chúng giúp ta thuận tiện hơn rất nhiều khi viết chương trình.

Thứ tự sự kiện:

Một hành động có thể kích hoạt nhiều sự kiện.

Ví dụ: một lần nhấp chuột đầu tiên kích hoạt mousedown, sau đó đến mouseup và click.

Trong trường hợp khi một hành động khởi tạo nhiều sự kiện, thứ tự của chúng sẽ được sửa. Đó là, các trình xử lý được gọi theo thứ tự là mouseedmouseupclick. Các sự kiện được xử lý trong cùng một chuỗi: onmouseup kết thúc trước khi chạy onclick.

Thuộc tính Which

Các sự kiện liên quan đến nhấp chuột luôn có thuộc tính Which, cho phép nhận nút chuột chính xác.

Nó không được sử dụng cho các sự kiện clickcontextmenu, bởi vì các sự kiện đó chỉ xảy ra khi nhấn chuột trái(click) và nhấn chuột phải(contextmenu).

Nhưng nếu chúng ta sử dụng mousedownmouseup, thì chúng ta cần nó, bởi vì những sự kiện này kích hoạt trên bất kỳ nút nào, do đó cho phép phân biệt giữa “mousedown” và “left-mousedown”.

Có ba giá trị có thể có:

Công cụ sửa đổi: shift, alt, ctrl và meta

Tất cả các sự kiện chuột bao gồm thông tin về các phím hỗ trợ được nhấn. Các thuộc tính bao gồm:

  • shiftKey
  • altKey
  • ctrlKey
  • metaKey (Cmd đối với Mac)

Ví dụ: nút bên dưới chỉ hoạt động trên Alt + Shift + click:

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về mouse event trong JavaScript. Trong bài học tiếp mình sẽ giới thiệu đến các bạn Bubbling và capturing trong JavaScript.

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