Sự Kiện (Event) trong jQuery

Khám Phá Sự Kiện (Event) trong jQuery

Hãy tham gia vào bài học jQuery này để hiểu rõ về Sự Kiện (Event) trong jQuery, cùng cách xử lý chúng một cách linh hoạt. Đừng bỏ lỡ những kiến thức hữu ích dưới đây của Mytour!

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

Sự kiện (Event) 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ư 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 cung cấp những phương thức xử lý sự kiện mạnh mẽ cho hầu hết các sự kiện trình duyệt, bao gồm các phương thức như ready(), click(), keypress(), focus(), blur(), change(), ... .

Ví dụ: để thực thi một số đoạn 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:

Lưu ý:$(document).ready() là sự kiện được sử dụng để tương tác với một trang an toàn bằng jQuery. Mã được đặt 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.

Chủ yếu, các sự kiện (events) trong jQuery được phân chia thành 4 nhóm chính: sự kiện chuột (mouse event), sự kiện bàn phím (keyboard event), sự kiện biểu mẫu (form event) và sự kiện tài liệu/ cửa sổ (document/window event).

2. Sự Kiện Chuột (Mouse Event)

Sự kiện Chuột được kích hoạt khi người dùng thực hiện thao tác như 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 phổ biến được sử dụng để xử lý sự kiện chuột.

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 sẽ được thực thi khi người dùng thực hiện thao tác click vào phần tử tương ứng.

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

Kết quả xuất hiện như sau:

Lưu ý: Trong hàm xử lý sự kiện jQuery, từ khóa 'this' thường được sử dụng để tham chiếu đến phần tử 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 cho sự kiện 'dblclick' vào các phần tử được chọn. Hàm liên kết sẽ thực thi khi người dùng thực hiện thao tác kích đúp chuột lên phần tử tương ứng.

Ví dụ: Trong ví dụ sau, khi người dùng kích đúp chuột vào phần tử, các phần tử p sẽ được ẩn đi:

Kết quả xuất hiện như sau:

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

Ví dụ: Trong ví dụ sau, khi người dùng di chuyển con trỏ chuột lên phần tử, các phần tử p sẽ được làm nổi bật và giữ lại trạng thái đó khi di chuyển con trỏ sang vị trí khác:

Kết quả xuất hiện như sau:

Mẹo: Có thể xem phương thức hover() như sự kết hợp của mouseenter() và mouseleave() trong jQuery.

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

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

Ví dụ: Trong ví dụ sau, khi người dùng di chuyển con trỏ chuột lên phần tử, phần tử p sẽ được làm nổi bật:

Kết quả xuất hiện như sau:

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

Phương thức mouseleave() trong jQuery gắn kết 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ụ sau, khi người dùng rời con trỏ chuột khỏi phần tử, các lớp hiệu ứng làm nổi bật trên phần tử p sẽ bị xóa:

Kết quả xuất hiện như sau:

3. Sự kiện Bàn phím

Sự kiện Bàn phím đượ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 phổ biến được sử dụng để xử lý Sự kiện Bàn phím:

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

Phương thức keypress() trong jQuery gắn kết một hàm xử lý sự kiện vào các phần tử được chọn (thường là form control) và đượ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ụ: Trong ví dụ sau, thông báo sẽ xuất hiện khi sự kiện keypress được kích hoạt, cùng với số lần kích hoạt khi người dùng nhấn phím trên bàn phím:

Kết quả sẽ xuất hiện như sau:

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 gắn kết một hàm xử lý sự kiện vào các phần tử được chọn (thường là form control) và được thực thi khi người dùng nhấn phím đầu tiên trên bàn phím.

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

Kết quả hiển thị như sau:

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

Phương thức keyup() trong jQuery gắn kết một hàm xử lý sự kiện cho các phần tử được chọn (thường là form control) và đượ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ụ: dưới đây là ví dụ 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.

Kết quả hiển thị như sau:

Mẹo: Keyboard Event trong jQuery có thể được gắn kết với bất kỳ phần tử nào, 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 gắn kết trong form control 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 điều chỉnh các giá trị của form control như nhập văn bản trong khung văn bản, chọn tùy chọn trong hộp thoại, ... . 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 kết nối một hàm xử lý sự kiện cho các phần tử input, textarea, và select, được thực thi khi giá trị của các phần tử này thay đổi.

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

Kết quả đầu ra sẽ có dạng như sau:

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

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

Phương thức focus() trong jQuery gắn kết một hàm xử lý sự kiện vào các phần tử được chọn (thường là các điều khiển và liên kết) và được thực thi khi sự kiện focus được kích hoạt.

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

Kết quả đầu ra sẽ có dạng như sau:

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

Phương thức blur() trong jQuery gắn kết một hàm xử lý sự kiện cho các phần tử biểu mẫu như input, textarea và select.

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

Kết quả đầu ra sẽ có dạng như sau:

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

Phương thức submit() trong jQuery gắn kết 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ụ: Trong ví dụ dưới đây, sẽ hiển thị thông báo phụ thuộc vào giá trị được nhập khi người dùng gửi biểu mẫu:

Kết quả đầu ra sẽ có dạng như sau:

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

5. Document / Window Event

Sự Kiện Document / Window được kích hoạt khi trang DOM (Document Object Model) sẵn sàng hoặc khi người dùng thay đổi kích thước, cuộn cửa sổ trình duyệt, ... . Dưới đây là một số phương thức jQuery để 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 thực thi khi DOM được tải đầy đủ.

Ví dụ: Trong 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 để thao tác.

Kết Quả Hiển Thị sẽ có dạng như sau:

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

Phương thức resize() trong jQuery gắn liền một 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ụ: Trong ví dụ dưới đây, sẽ hiển thị chiều rộng và chiều cao của 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:

Hiển Thị Kết Quả sẽ có dạng như sau:

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 mỗi khi vị trí cuộn của phần tử thay đổi.

Ví dụ: Trong 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:

Hiển Thị Kết Quả sẽ có dạng như sau:

Bài học này của Mytour đã giới thiệu đến bạn về Event (sự kiện) trong jQuery. Ở bài học tiếp theo, Mytour sẽ hướng dẫn cách Ẩn/Hiện các phần tử HTML bằng jQuery. Ngoài ra, bạn đọc cũng có thể tham khảo thêm một số bài viết khác trên Mytour để nắm vững hơn về cú pháp cơ bản của jQuery.