Event (sự kiện) trong jQuery

Bài học trước Taimienphi.vn đã giới thiệu cho bạn về Selector trong jQuery, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Event, sự kiện trong jQuery.

event su kien trong jquery

Event (sự kiện) trong jQuery

Tham khảo tiếp bài học jQuery dưới đây của Taimienphi.vn để tìm hiểu về Event (sự kiện) trong jQuery là gì, cách xử lý các sự kiện trong jQuery như thế nào nhé.

Mục Lục bài viết:
1. Event (sự kiện) là gì?
2. Mouse event
   2.1. Phương thức click()
   2.2. Phương thức dblclick()
   2.3. Phương thức hover()
   2.4. Phương thức mouseenter()
   2.5. Phương thức mouseleave()
3. Keyboard Event
   3.1. Phương thức keypress()
   3.2. Phương thức keydown()
   3.3. Phương thức keyup()
4. Form Event
   4.1. Phương thức change()
   4.2. Phương thức focus()
   4.3. Phương thức blur()
   4.4. Phương thức submit()
5. Document / Window Event
   5.1. Phương thức ready()
   5.2. Phương thức resize()
   5.3. Phương thức scroll()

 

1. Event (sự kiện) là gì?

Event (sự kiện) thường được kích hoạt bởi tương tác của người dùng với trang web, chẳng hạn như click vào nút hoặc link, nhập văn bản vào khung , nhấn một phím trên bàn phím, di chuyển con trỏ chuột, ... . Trong một số trường hợp trình duyệt có thể tự kích hoạt các sự kiện, chẳng hạn như tải trang, ... .

jQuery tăng cường cơ chế xử lý các 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 sự kiện trình duyệt, chẳng hạn như các phương thức ready(), click(), keypress(), focus(), blur(), change(), ... .

Ví dụ: để thực thi một số mã JavaScript khi DOM đã sẵn sàng, chúng ta có thể sử dụng phương thức jQuery ready () như dưới đây:

event su kien trong jquery

Lưu ý:$(document).ready() là sự kiện được sử dụng để thao tác với một trang an toàn bằng jQuery. Mã được bao gồm trong sự kiện này chỉ chạy khi trang DOM sẵn sàng, tức là khi tài liệu đã sẵn sàng để thao tác.

Về cơ bản, các event (sự kiện) trong jQuery được phân loại thành 4 nhóm chính: mouse event, keyboard event, form event và document/window event.

 

2. Mouse event

Mouse event được kích hoạt khi người dùng click chuột vào một số phần tử, hoặc di chuyển con trỏ chuột, ... . Dưới đây là một số phương thức jQuery được sử dụng phổ biến để xử lý mouse event.

 

2.1. Phương thức click()

Phương thức click () trong 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 "click". Hàm đính kèm được thực thi khi người dùng click vào phần tử đó.

Ví dụ: trong ví dụ dưới đây sẽ ẩn các phần tử p trên trang khi người dùng click:

event su kien trong jquery 2

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 3

Lưu ý: từ khóa "this" trong hàm xử lý sự kiện jQuery là tham chiếu đến phần tử có chứa sự kiện.

 

2.2. Phương thức dblclick()

Phương thức dblclick() trong jQuery đính kèm một hàm xử lý sự kiện vào các phần tử cho sự kiện "dblclick". Hàm đính kèm được thực thi khi người dùng kích đúp chuột vào phần tử đó.

Ví dụ: ví dụ dưới đây ẩn các phần tử p khi người dùng kích đúp chuột vào phần tử này:

event su kien trong jquery 4

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 5

 

2.3. Phương thức hover()

Phương thức hover() trong jQuery đí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, và được thực thi khi người dùng di chuyển và rời trỏ chuột vào các phần tử. Hàm đầu tiên được thực thi người dùng di con trỏ chuột qua phần tử, hàm thứ hai được thực thi khi người dùng rời con trỏ chuột khỏi phần tử đó.

Ví dụ: trong ví dụ dưới đây sẽ làm nổi bật các phần tử p khi người dùng đặt con trỏ chuột lên phần tử và khi người dùng di chuyển con trỏ sang vị trí khác:

event su kien trong jquery 6

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 7

Mẹo: chúng ta có thể coi phương thức hover() là sự kết hợp của các phương thức mouseenter()mouseleave() trong jQuery.

 

2.4. Phương thức mouseenter()

Phương thức mouseenter() trong jQuery đính kèm hàm xử lý sự kiện vào các phần tử được chọn, được thực thi khi chuột được đặt trên phần tử đó.

Ví dụ: ví dụ dưới đây sẽ thêm lớp hiệu ứng làm nổi bật phần tử p khi người dùng đặt con trỏ chuột được đặt trên phần tử:

event su kien trong jquery 8

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 9

 

2.5. Phương thức mouseleave()

Phương thức mouseleave() trong jQuery đính kèm một hàm xử lý sự kiện vào các phần tử được chọn và được thực thi khi con trỏ chuột rời khỏi phần tử đó.

Ví dụ: trong ví dụ dưới đây sẽ xóa các lớp hiệu ứng làm nổi bật khỏi phần tử p khi người dùng rời con trỏ chuột khỏi phần tử:

event su kien trong jquery 10

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 11

 

3. Keyboard Event

Keyboard Event được kích hoạt khi người dùng nhấn hoặc thả tay ra khỏi một phím nào đó trên bàn phím. Dưới đây là một số phương thức jQuery được sử dụng để xử lý Keyboard Event:

 

3.1. Phương thức keypress()

Phương thức keypress() trong jQuery đính kèm một hàm xử lý sự kiện vào các phần tử được chọn (thường là form control) được thực thi khi trình duyệt nhận đầu vào từ bàn phím người dùng.

Ví dụ: ví dụ dưới đây sẽ hiển thị thông báo khi sự kiện keypress được kích hoạt và số lần được kích hoạt khi người dùng nhấn phím trên bàn phím:

event su kien trong jquery 12

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 13

Lưu ý: Sự kiện keypress tương tự như sự kiện keydown, ngoại trừ các phím sửa đổi và các phím như Shift, Esc, Backspace, Delete, và các phím mũi tên, ... .

 

3.2. Phương thức keydown()

Phương thức keydown() trong jQuery đính kèm hàm xử lý sự kiện vào các phần tử được chọn (thường là form control) được thực thi khi người dùng nhấn phím đầu tiên trên bàn phím.

Ví dụ: ví dụ dưới đây sẽ hiển thị thông báo khi sự kiện keydown được kích hoạt và số lần được kích hoạt khi người dùng nhấn phím trên bàn phím:

event su kien trong jquery 14

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 15

 

3.3. Phương thức keyup()

Phương thức keyup() trong jQuery đính kèm một hàm xử lý sự kiện cho các phần tử được chọn (thường là form control) được thực thi khi người dùng thả tay ra khỏi một phím trên bàn phím.

Ví dụ: ví dụ dưới đây hiển thị thông báo khi sự kiện keyup được kích hoạt và số lần sự kiện được kích hoạt khi người dùng nhấn và thả tay ra khỏi một phím trên bàn phím.

event su kien trong jquery 16

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 17

Mẹo: Keyboard Event trong jQuery có thể được đính kèm với phần tử bất kỳ, nhưng sự kiện chỉ được gửi đến các phần tử trọng tâm. Đó là lý do tại sao keyboard event thường được đính kèm trong form control chẳng hạn như khung nhập văn bản đầu vào, ....

 

4. Form Event

Form Event được kích hoạt khi người dùng sửa đổi các giá trị form control chẳng hạn như nhập văn bản trong khung văn bản, chọn các tùy chọn bất kỳ trong hộp, ... . Dưới đây là một số phương thức jQuery được sử dụng để xử lý form event:

 

4.1. Phương thức change()

Phương thức change() trong jQuery đính kèm một hàm xử lý sự kiện cho các phần tử input, textarea select, được thực thi khi các giá trị của các phần tử này thay đổi.

Ví dụ: trong ví dụ dưới đây sẽ hiển thị cảnh báo khi người dùng chọn tùy chọn bất kỳ trong menu thả xuống:

event su kien trong jquery 18

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 19

Lưu ý: Với các hộp checkbox, nút radio, sự kiện sẽ được kích hoạt ngay lập tức khi người dùng click chuột để chọn, nhưng đối với văn bản đầu vào, sự kiện được kích hoạt sau khi phần tử bị sửa đổi giá trị.

 

4.2. Phương thức focus()

Phương thức focus() trong jQuery đính kèm hàm xử lý sự kiện cho các phần tử được chọn (thường là form control và link) được thực thi khi sự kiện focus được kích hoạt.

Ví dụ: ví dụ dưới đây sẽ hiển thị thông báo khi đầu vào nhận văn bản được kích hoạt:

event su kien trong jquery 20

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 21

 

4.3. Phương thức blur()

Phương thức blur() trong jQuery đính kèm một hàm xử lý sự kiện cho các phần tử biểu mẫu như input, textareaselect.

Ví dụ: trong ví dụ dưới đây minh họa cách sử dụng phương thức blur():

event su kien trong jquery 22

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 23

 

4.4. Phương thức submit()

Phương thức submit() trong jQuery đính kèm hàm xử lý sự kiện cho các phần tử form được thực thi khi người dùng gửi một biểu mẫu (form).

Ví dụ: ví dụ dưới đây sẽ hiển thị thông báo, tùy thuộc vào giá trị được nhập khi người dùng gửi biểu mẫu:

event su kien trong jquery 24

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 25

Mẹo: chúng ta có thể gửi biểu mẫu bằng cách click chọn nút gửi (submit) hoặc có thể nhấn Enter.

 

5. Document / Window Event

Document / Window Event được kích hoạt trong trường hợp khi trang DOM (Document Object Model) đã sẵn sàng hoặc khi người dùng thay đổi kích thước, hoặc cuộn cửa sổ trình duyệt, ... . Dưới đây là một số phương thức jQuery được sử dụng để xử lý các sự kiện này.

 

5.1. Phương thức ready()

Phương thức ready() trong jQuery chỉ định một hàm được thực thi khi DOM được tải đầy đủ.

Ví dụ: ví dụ dưới đây sẽ thay thế đoạn văn bản ngay khi hệ thống phân cấp DOM được xây dựng đầy đủ và sẵn sàng để được thao tác.

event su kien trong jquery 26

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 27

 

5.2. Phương thức resize()

Phương thức resize() trong jQuery đính kèm hàm xử lý sự kiện cho phần tử window được thực thi khi kích thước cửa sổ trình duyệt thay đổi.

Ví dụ: ví dụ dưới đây sẽ hiển thị chiều rộng và chiều cao cửa sổ trình duyệt hiện tại khi người dùng thay đổi kích thước cửa sổ bằng cách kéo các góc:

event su kien trong jquery 28

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 29

 

5.3. Phương thức scroll()

Phương thức scroll() trong jQuery đính kèm hàm xử lý sự kiện cho các phần tử windows hoặc các iframe có thể cuộn, được thực thi bất cứ khi nào vị trí cuộn của phần tử thay đổi.

Ví dụ: ví dụ dưới đây sẽ hiển thị thông báo khi người dùng cuộn cửa sổ trình duyệt:

event su kien trong jquery 30

Kết quả đầu ra có dạng như dưới đây:

event su kien trong jquery 31

https://thuthuat.taimienphi.vn/event-su-kien-trong-jquery-51484n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về Event (sự kiện) trong jQuery. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về cách ẩn hiện các phần tử HTML bằng jQuery. Ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm về cú pháp cơ bản của jQuery.

Tác giả: Phí Quỳnh Anh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Cách tạo trang web bằng jQuery
Phương thức Getter và Setter trong jQuery
Phương thức stop() trong jQuery
Hàm callback trong jQuery
Hiệu ứng động trong jQuery
Từ khoá liên quan:

Event (sự kiện) trong jQuery

, jQuery, học jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới