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à một 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 điều gì đó xảy ra.

Ví dụ:

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

Thuật ngữ "hỏa hoạn / bị 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, thời điểm 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ó một 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 điều này:

$("p").click();

Bước tiếp theo là xác định điều gì sẽ xảy ra khi sự kiện xảy ra. Bạn phải chuyể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 $(document).ready()thức này 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 click()thức này đí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 người dùng nhấp vào phần tử HTML.

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

Thí dụ

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

dblclick ()

Phương dblclick()thức này đí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 người dùng nhấp đúp vào phần tử HTML:

Thí dụ

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

mouseenter ()

Phương mouseenter()thức này đí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 vào phần tử HTML:

Thí dụ

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

mouseleave ()

Phương mouseleave()thức này đí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:

Thí dụ

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

Di chuột xuống()

Phương mousedown()thức này đí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 nhấn nút chuột trái, chuột giữa hoặc chuột phải trong khi chuột ở trên phần tử HTML:

Thí dụ

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

mouseup ()

Phương mouseup()thức này đí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 thả nút chuột trái, chuột giữa hoặc chuột phải trong khi chuột ở trên phần tử HTML:

Thí dụ

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

bay lượn()

Phương hover()thức này có hai chức năng 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:

Thí dụ

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

tiêu điểm()

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

Hàm được thực thi khi trường biểu mẫu có tiêu điểm:

Thí dụ

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

mơ hồ()

Phương blur()thức này đính kèm một hàm xử lý sự kiện vào một 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:

Thí dụ

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

Phương thức on ()

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

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

Thí dụ

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

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

Thí dụ

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

Bài tập jQuery