TỰ HỌC JQUERY – CƠ BẢN - BÀI 4 – XỬ LÝ CÁC SỰ KIỆN

Xem Mục lục lập trình JQuery

Sự kiện là gì?

Tất cả các hành động của người dùng mà 01 trang web có thể đáp ứng được gọi là sự kiện.

01 sự kiện diễn tả chính xác khoảnh khắc khi 01 cái gì đó xảy ra.

Ví dụ:

• Di chuyển chuột trên 01 phần tử nào đó.
• Chọn 01 nút radio.
• Bấm chuột trái lên 01 phần tử.
  

02 thời điểm "fires/fired"( xảy ra/đã xảy ra) thường được dùng với sự kiện.

Ví dụ: "Sự kiện nhấn phím đã xảy ra, là khoảnh khắc khi bạn bấm 01 phím (chưa nhả ra)".

Sau đây là 01 vài sự kiện thông dụng của DOM:

Sự kiện chuột	Sự kiện bàn phím	Sự kiện Form	Sự kiện trên tài liệu/Cửa sổ
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

---

Cú pháp jQuery cho các hàm sự kiện

Trong jQuery, hầu hết sự kiện DOM đều có hàm jQuery giống nhau.

Để gán sự kiện click chuột vào tất cả các đoạn trong 01 trang, bạn dùng cách sau:

$("p").click();

Tiếp theo, để xác định những gì xảy ra khi sự kiện xảy ra. Bạn phải dùng hàm sau:

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

Các hàm sự kiện hay dùng trong jQuery

$(document).ready()
Phương thức $(document).ready() cho phép chúng ta thực thi 01 hàm sau khi toàn bộ trang web đã được tải.

Phương thức này đã được mô tả trong bài jQuerySyntax.

click()

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

Ví dụ sau đây sẽ ẩn 01 phần tử <p> khi bạn bấm vào nó:

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

dblclick()

Phương thức dblclick() đính 01 sự kiện nhấp đôi chuột trái vào 01 phần tử HTML.

Phương thức sẽ được thực thi khi người dùng nhấp đôi chuột trái lên phần tử HTML:

Ví dụ:

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

mouseenter()

Phương thức mouseenter() đính kèm phương thức rê chuột vào phần tử HTML.

Ví dụ:

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

mouseleave()

Phương thức mouseleave() đính kèm 01 phương thức vào phần tử HTML.

Phương thứ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 01 phương thức vào phần tử HTML.

Phương thức thực thi khi chuột trái hay chuột phải nhấn xuống khi con trỏ còn ở 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 01 phương thức vào 01 phần tử HTML.

Phương thức thực thi khi nhả chuột trái hay chuột phải trong khi con trỏ vẫn nằm trên phần tử HTML.

Ví dụ:

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

hover()

Phương thức hover() sự kết hợp giữa 02 phương thức mouseenter() và mouseleave()

Phương thức này có 02 hàm:

• Hàm 01: thực thi khi đưa con trỏ vào phần tử HTML.
  
• Hàm 02: thực thi khi con trỏ 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 02 hàm vào 01 phần tử form.

Hàm này thực thi khi phần tử form nhận được dấu nháy.

Ví dụ:

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

blur()

Phương thức blur() đính kèm 01 hàm vào phần tử form.

Hàm này sẽ thực thi khi phần tử form mất dấu nháy.

Ví dụ:

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

Phương thức on()

Phương thức on() đính kèm 01 hay nhiều hàm xử lý sự kiện vào những phần tử được chọn lựa.

Ví dụ sau đính kèm sự kiện bấm chuột vào thẻ <p>

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

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

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM