jQuery Events - Sự kiện

Chào mừng bạn quay lại với chuỗi bài học jQuery trên CodeTutHub! Ở bài trước, chúng ta đã làm quen với cách thao tác chọn phần tử bằng jQuery. Hôm nay, chúng ta sẽ tìm hiểu một trong những phần quan trọng nhất của jQuery: Events - Sự kiện.

1. jQuery Event là gì?

Trong JavaScript nói chung và jQuery nói riêng, event (sự kiện) là những hành động mà người dùng hoặc trình duyệt thực hiện, như click chuột, di chuột, nhập liệu, cuộn trang, v.v.

jQuery giúp bạn xử lý các sự kiện này một cách ngắn gọn và dễ hiểu hơn nhiều so với JavaScript thuần.

2. Cấu trúc xử lý sự kiện trong jQuery

Cú pháp cơ bản:

$(selector).event(function() {
  // hành động khi sự kiện xảy ra
});

Ví dụ:

<button id="btnClick">Click me!</button>

<script>
$("#btnClick").click(function() {
  alert("Bạn vừa click vào nút!");
});
</script>

Ở ví dụ trên:

• #btnClick là ID của nút.
• .click() là sự kiện click chuột.
• Hàm bên trong sẽ chạy khi người dùng click vào nút.

3. Một số sự kiện phổ biến trong jQuery

4. Ví dụ thực tế

Ví dụ 1: Hover để thay đổi màu nền

<div id="box" style="width:200px;height:100px;background:#ccc;padding: 1rem">Hover me!</div>

<script>
  $("#box").hover(
    function() {
      $(this).css("background", "lightblue");
    },
    function() {
      $(this).css("background", "#ccc");
    }
  );
</script>

Ví dụ 2: Kiểm tra form trước khi submit

<form id="myForm">
  <input type="text" id="username" placeholder="Nhập tên">
  <button type="submit">Gửi</button>
</form>

<script>
  $("#myForm").submit(function(e) {
    let username = $("#username").val();
    if (username == "") {
      alert("Vui lòng nhập tên!");
      e.preventDefault(); // ngăn không gửi form
    }
  });
</script>

5. Sử dụng .on() để gán nhiều sự kiện

Đôi khi bạn muốn gán nhiều sự kiện hoặc gán sự kiện cho các phần tử được tạo động. Giả sử bạn có một nút “Thêm nút mới”. Mỗi lần bấm, nó sẽ tạo ra một nút mới trong DOM. Bạn muốn mỗi nút mới khi được click sẽ hiển thị một thông báo. Đó là lúc .on() phát huy sức mạnh.

<button id="addButton">Thêm nút mới</button>
<div id="buttonContainer"></div>

<script>
 $('#addButton').click(function() {
  $('#buttonContainer').
    append('<button class="btnDynamic">Nút được tạo</button>');
});

// Gán sự kiện click cho tất cả nút có class .btnDynamic (bao gồm cả nút tạo động)
$(document).on('click', '.btnDynamic', function() {
  alert('Bạn vừa click vào nút được tạo động!');
});
</script>

Giải thích ví dụ:

• $("#addButton").click(...): Mỗi lần click sẽ thêm một nút mới vào #buttonContainer.
• .btnDynamic: Class được gán cho các nút mới.
• $(document).on("click", ".btnDynamic", ...): Vì các nút .btnDynamicchưa tồn tại khi trang load, nên ta gán sự kiện gián tiếp qua document. Đây là cách để sự kiện áp dụng được cả cho phần tử được tạo sau.

6. Gỡ sự kiện với .off()

Nếu bạn muốn gỡ bỏ một sự kiện:

<button id="btnClick">Click tôi</button>
<button id="btnRemoveEvent">Gỡ sự kiện</button>

<script>
// Gán sự kiện click cho nút đầu tiên
$("#btnClick").click(function() {
  alert("Nút đã được click!");
});

// Gỡ sự kiện click khi bấm nút thứ hai
$("#btnRemoveEvent").click(function() {
  $("#btnClick").off("click");
  alert("Đã gỡ sự kiện click khỏi nút!");
});
</script>

Giải thích ví dụ:

• $("#btnClick"): chọn phần tử có id="btnClick".
• .off("click"): loại bỏ toàn bộ hàm xử lý sự kiện click đã được gán cho phần tử này (kể cả bằng .click() hay .on("click", ...)).

7. Tổng kết

• jQuery giúp xử lý sự kiện một cách dễ dàng và trực quan.
• Hỗ trợ rất nhiều loại sự kiện thường dùng trong tương tác giao diện.
• Sử dụng .on() để xử lý sự kiện cho phần tử tạo động.
• Đừng quên .off() để gỡ sự kiện khi cần thiết!

👉 Tiếp theo: Trong bài học tới, chúng ta sẽ tìm hiểu jQuery Effects – Tạo hiệu ứng đẹp mắt cho website. Hãy tiếp tục theo dõi chuỗi bài học trên CodeTutHub nhé!

Bạn có thể để lại bình luận hoặc thắc mắc bên dưới, mình sẽ phản hồi sớm nhất!

📌 codetuthub.com – học code từ thực chiến