Phương thức sự kiện jQuery

jQuery được thiết kế riêng để phản hồi các sự kiện trong trang HTML.

Sự kiện là gì?

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

Một sự kiện đại diện cho thời điểm chính xác khi một điều gì đó xảy ra.

Ví dụ:

di chuyển chuột qua một phần tử
chọn nút radio
nhấp chuột vào một phần tử

Thuật ngữ "cháy/sa thải" thường được sử dụng với các sự kiện. Ví dụ: "Sự kiện nhấn phím được kích hoạt ngay khi bạn nhấn một phím".

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

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Cú pháp jQuery cho các phương thức sự kiện

Trong jQuery, hầu hết các sự kiện DOM đều có phương thức jQuery tương đương.

Để chỉ định một sự kiện nhấp chuột cho tất cả các đoạn trên một trang, bạn có thể thực hiện việc này:

$("p").click();

Bước tiếp theo là xác định điều gì sẽ xảy ra khi sự kiện diễn ra. Bạn phải truyền một hàm cho sự kiện:

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

Các phương thức sự kiện jQuery thường được sử dụng

$(tài liệu).ready()

Phương thức $(document).ready() cho phép chúng ta thực thi một hàm khi tài liệu được tải đầy đủ. Sự kiện này đã được giải thích trong chương Cú pháp jQuery .

nhấp chuột()

Phương thức click() gắn hàm xử lý sự kiện vào phần tử HTML.

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

Ví dụ sau cho biết: Khi sự kiện nhấp chuột kích hoạt trên phần tử <p> ; ẩn phần tử <p> hiện tại:

Ví dụ

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

Hãy tự mình thử »

dblclick()

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

Hàm đượ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();
});

Hãy tự mình thử »

di chuột()

Phương thức mouseenter() gắn 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 nhập vào phần tử HTML:

Ví dụ

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

Hãy tự mình thử »

mouseleave()

Phương thức mouseleave() gắn 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!");
});

Hãy tự mình thử »

Di chuột xuống()

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

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

Ví dụ

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

Hãy tự mình thử »

di chuột()

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

Hàm được thực thi khi thả nút chuột trái, giữa hoặc phải khi chuột ở trên phần tử HTML:

Ví dụ

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

Hãy tự mình thử »

bay lượn()

Phương thức hover() có hai hàm và là sự kết hợp của các phương thức 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!");
});

Hãy tự mình thử »

tập trung()

Phương thức focus() đính kèm 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 biểu mẫu được lấy tiêu điểm:

Ví dụ

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

Hãy tự mình thử »

mơ hồ()

Phương thức blur() đính kèm 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 biểu mẫu mất tiêu điểm:

Ví dụ

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

Hãy tự mình thử »

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 phần tử được chọn.

Đính kèm sự kiện nhấp chuột vào phần tử <p> :

Ví dụ

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

Hãy tự mình thử »

Đính kèm nhiều trình xử lý sự kiện vào 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");
  }
});

Hãy tự mình thử »

bài tập jQuery