NTM Solutions

Chủ Nhật, 22 tháng 1, 2017

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

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 jQuery Syntax.
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ó:

Ví dụ:

$("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>:

Ví dụ:

$("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");
    }
});