jQuery được thiết kế để đáp ứng các sự kiện trong trang HTML.

Events (Sự kiện) là gì?

Tất cả các hành động của khách truy cập khác nhau mà một trang web có thể phản hồi được gọi là sự kiện.

Ví dụ:

• Di chuột qua một phần tử
• Chọn một radio button
• click vào một phần tử

Thuật ngữ "fires/fired" thường được sử dụng với các event. Ví dụ: "Sự kiện nhấn phím là fired, thời điểm bạn nhấn một phím".

Dưới đây là một số DOM events phổ biến:

Cú pháp jQuery cho event methods (phương thức)

Trong jQuery, hầu hết DOM events có một phương thức jQuery tương đương.

Để chỉ định một event nhấp chuột cho tất cả các đoạn trên một trang, bạn có thể làm điều này:

$("p").click();

Bước tiếp theo là xác định những gì sẽ xảy ra khi event này chạy. Bạn phải truyền một hàm cho event:

$("p").click(function(){
  // action goes here!!
});

Các event methods thường được sử dụng

$(document).ready()

Phương thức $(document).ready() cho phép chúng ta thực thi một chức năng khi tài liệu được tải đầy đủ.

click()

Phương thức click() đính kèm một hàm xử lý sự kiện vào một phần tử HTML.

Chức năng được thực thi khi người dùng nhấp vào phần tử HTML.

Ví dụ sau đây là: Khi một sự kiện nhấp chuột vào phần tử <p> nào; phần tử <p> đó sẽ ẩn đi:

Ví dụ

$("p").click(function(){
  $(this).hide();
});

dblclick()

Phương thức dblclick() đính kèm một hàm xử lý sự kiện vào một phần tử HTML.

Chức năng được thực thi khi người dùng nhấp đúp vào phần tử HTML:

Ví dụ

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

Phương thức mouseenter() đính kèm một hàm xử lý sự kiện vào một phần tử HTML.

Hàm được thực thi khi con trỏ chuột đi vào phần tử HTML:

Ví dụ

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

mouseleave()

Phương thức mouseleave() đính kèm một hàm xử lý sự kiện vào một phần tử HTML.

Hàm được thực thi khi con trỏ chuột rời khỏi phần tử HTML:

Ví dụ

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

mousedown()

Phương thức mousedown() đính kèm một hàm xử lý sự kiện vào một phần tử HTML.

Chức năng được thực thi, khi nhấn nút chuột trái, giữa hoặc phải, trong khi chuột ở trên phần tử HTML:

Ví dụ

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

mouseup()

Phương thức mouseup() đính kèm một hàm xử lý sự kiện vào một phần tử HTML.

Chức năng được thực thi, khi nút chuột trái, giữa hoặc phải được giải phóng, trong khi chuột nằm trên phần tử HTML:

Ví dụ

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

hover()

Phương thức hover() cần hai hàm và là sự kết hợp của mouseenter() và mouseleave().

Hàm đầu tiên được thực thi khi chuột vào phần tử HTML và hàm thứ hai được thực thi khi chuột rời khỏi phần tử HTML:

Ví dụ

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

focus()

Phương thức focus() đính kèm một hàm xử lý sự kiện vào trường biểu mẫu HTML.

Hàm được thực thi khi trường input được focus:

Ví dụ

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

blur()

Phương thức blur() đính kèm một hàm xử lý sự kiện vào trường biểu mẫu HTML.

Hàm được thực thi khi trường input mất focus:

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

Phương thức on()

Phương thức on() đính kèm một hoặc nhiều trình xử lý sự kiện cho các thành phần được chọn.

Đính kèm một trình xử lý sự kiện vào một phần tử <p>:

Ví dụ

$("p").on("click", function(){
  $(this).hide();
});

Đính kèm nhiều trình xử lý sự kiện vào một phần tử <p>:

Ví dụ

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});