Bài jQuery 5: Các sự kiện với chuột trong jQuery

0
136

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 với chuột trong jQuery.

Sự kiện là gì?

Các sự kiện thường được kích hoạt bởi sự tương tác của người dùng với trang web, chẳng hạn như khi nhấp vào một liên kết hoặc nút, văn bản được nhập vào hoặc lựa chọn được thực hiện trong checkbox, phím được nhấn trên bàn phím, con trỏ chuột được di chuyển, vv Trong một số trường hợp, Trình duyệt có thể kích hoạt các sự kiện, chẳng hạn như tải trang và hủy các sự kiện.

jQuery tăng cường các cơ chế xử lý sự kiện cơ bản bằng cách cung cấp các phương thức sự kiện cho hầu hết các trình duyệt, một số phương thức như: ready(), click(), keypress(), focus(), blur(), change(), v.v.

Các sự kiện với chuột

Một sự kiện với chuột được kích hoạt khi người dùng nhấp vào một số phần tử, di chuyển con trỏ chuột, v.v … Dưới đây là một số phương thức jQuery được sử dụng phổ biến để xử lý các sự kiện chuột.

Phương thức click()

Phương thức click() của jQuery đính kèm một hàm xử lý sự kiện vào các phần tử được chọn cho sự kiện “nhấp chuột”. Hàm đính kèm được thực thi khi người dùng nhấp vào phần tử đó. Ví dụ sau sẽ ẩn các phần tử <p> trên một trang khi chúng được nhấp.

Phương thức dblclick()

Phương thức dblclick() của jQuery đính kèm một hàm xử lý sự kiện vào các phần tử được chọn cho sự kiện “dblclick”. Hàm đính kèm được thực thi khi người dùng nhấp đúp vào phần tử đó. Ví dụ sau sẽ ẩn các phần tử <p> khi chúng được nhấp đúp.

Phương thức hover()

Phương thức hover() đính kèm một hoặc hai hàm xử lý sự kiện vào các phần tử được chọn, nó được thực thi khi người dùng đưa con trỏ chuột đến các phần tử. Hàm đầu tiên được thực thi khi người dùng đặt con trỏ chuột lên một phần tử, trong khi hàm thứ hai được thực thi khi người dùng loại bỏ con trỏ chuột khỏi phần tử đó.

Ví dụ sau sẽ làm nổi bật các phần tử <p> khi bạn đặt con trỏ lên nó, phần tô sáng sẽ bị xóa khi bạn xóa con trỏ.

Phương thức mouseleave()

Phương thức mouseleave() của jQuery gắn hàm xử lý sự kiện với các phần tử được chọn, nó được thực thi khi con trỏ chuột rời khỏi một phần tử. Ví dụ sau sẽ xóa phần nổi bật của phần tử <p> khi bạn loại bỏ con trỏ khỏi nó.

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 với chuột trong jQuery. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về các sự kiện với bàn phím trong jQuery.

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