Bài 4: Jquery Event - Bắt các sự kiện trong jQuery

views

A+A-

PrintEmail

Trong series học jQuery Online cơ bản đến nâng cao thì bài học về các sự kiện cũng rất quan trọng, giúp bạn hiểu rõ và sử dụng cú pháp gì trong jQuery để có thể bắt được các sự kiện như click chuột, rê chuột, chọn option, bấm phím v.v...

Sự Kiện Trên Website là gì?

Khi các khách truy cập vào website của bạn và thực hiện các hành động mà trang web có thể nắm bắt và phản hồi được gọi là sự kiện.
Ví dụ như khi khách:

• Bấm vào nút button
• Nhấp đôi chuột
• Rê chuột vào một phần tử trên website
• Bấm bàn phím
• Check vào ô checkbox
• Lựa chọn một option trong combobox

Dưới đây là một số sự kiện thường gặp

Nhóm sự kiện	Sự Kiện	Mô tả
			Mouse Events - Các sự kiện của chuột	click	Bắt sự kiện khi nhấp chuột
dblclick	Bắt sự kiện khi nhấp đúp chuột
mouseenter	Bắt sự kiện khi chuột di chuyển vào trong khu vực một phần tử
mouseleave	Bắt sự kiện khi chuột di chuyển ra khỏi khu vực một phần tử
Keyboard Events - Các sự kiện của bàn phím	keypress	Bắt sự kiện khi phím được nhấn
	keydown	Bắt sự kiện khi phím được nhấn và thả ra
	keyup	Bắt sự kiện khi phím được thả ra
Form Events - Các sự kiện của form	submit	Bắt sự kiện khi một form được gửi đi
	change	Bắt sự kiện change của mỗi phần tử đã so khớp
	focus	Bắt sự kiện focus của mỗi phần tử đã so khớp
	blur	Bắt sự kiện blur của mỗi phần tử đã so khớp
Document/Window Events - Các sự kiện của tài liệu	load	Bắt sự kiện khi tài liệu được tải
	resize	Bắt sự kiện khi kích cỡ cửa sổ thay đổi
	scroll	Bắt sự kiện khi cuộn cửa sổ
	unload	Bắt sự kiện khi tài liệu không được tải

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

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

jQuery document ready Method

$(document).ready() chính là phương thức hay gặp nhất, đây là phương thức cho sự kiện khi trang web được tải đầy đủ tài liệu. Trong bài học Cú pháp jQuery đã được nhắc đến phương thức này. Cú pháp như sau:

$(document).ready(function(){
  // Viết hàm jQuery để thực hiện hành động tại đây
});

Hoặc

$(function(){
  //  Viết hàm jQuery để thực hiện hành động tại đây
});

jQuery click() Method

Sự kiện click xảy ra khi một yếu tố, phần tử được nhấp chuột vào.
Chúng ta có cú pháp như sau để kích hoạt sự kiện click cho selector được chọn

$(selector).click()

Bước tiếp theo là xác định những gì sẽ xảy ra khi sự kiện này xảy ra. Chúng ta cần phải truyền một hàm cho phương thức sự kiện:

$(selector).click(function)

Ví dụ về sử dụng phương thức và truyền hàm cho sự kiện click chuột vào đoạn văn bản như sau:

  $("p").click(function(){
    alert("Đoạn văn đã được click.");
  });

Thử code »

jQuery dblclick() Method

Sự kiện double click xảy ra khi một yếu tố, phần tử được nhấp đôi chuột (nhấp 2 lần liên tục) vào.
Tương tự như phương thức của sự kiện click, Chúng ta có cú pháp như sau để kích hoạt sự kiện double click cho phần tử được chọn

$(selector).dblclick()

Bước tiếp theo là xác định những gì sẽ xảy ra khi sự kiện này xảy ra. Chúng ta cần phải truyền một hàm cho phương thức sự kiện:

$(selector).dblclick(function)

Ví dụ :

$("p").dblclick(function(){
  alert("Đoạn văn đã được nhấp đôi chuột.");
});

Thử code »

jQuery mouseenter() Method

Sự kiện mouseenter xảy ra khi con trỏ chuột di chuyển vào phần tử HTML được chọn.
Phương thức mouseenter () kích hoạt sự kiện mouseenter hoặc đính kèm một hàm để thực thi khi xảy ra sự kiện mouseenter
Cú pháp kích cho sự kiện mouseenter

$(selector).mouseenter()

Kèm theo hàm cho sự kiện mouseenter theo cú pháp

$(selector).mouseenter(function)

Ví dụ:

$("#p1").mouseenter(function(){
  alert("Bạn đã mouseenter vào p1!");
});

Thử code »

jQuery mouseleave() Method

Sự kiện mouseleave xảy ra khi con trỏ chuột di chuyển ra khỏi phần tử HTML được chọn.
Phương thức mouseleave () kích hoạt sự kiện mouseleave hoặc đính kèm một hàm để thực thi khi xảy ra sự kiện mouseleave
Cú pháp kích cho sự kiện mouseleave

$(selector).mouseleave()

Kèm theo hàm cho sự kiện mouseleave theo cú pháp

$(selector).mouseleave(function)

Ví dụ:

$("#p1").mouseleave(function(){
  alert("Bạn đã mouseleave ra khỏi p1!");
});

Thử code »

Trên đây là một số phương thức sự kiện trong jQuery. Để tìm hiểu rõ hơn, mình sẽ cố gắng dành riêng một chuyên mục jQuery Event, trong đó sẽ có từng bài viết cho từng loại sự kiện nhé.

Chuyên Mục : Chia sẻ Học jQuery Hướng dẫn jQuery cơ bản jQuery Event jQuery sự kiện jQuery tiếng Việt jQuery Tutorial Thiết kế website