Sự Kiện

Tất cả các sự kiện có trong JavaScript đều được thư viện jQuery hỗ trợ. Trong phần này bạn sẽ được làm quen với cách dùng thư viện này để xử lý các sự kiện phổ biến được dùng trong JavaScript.

Nhấp Chuột

Sự kiện này diễn ra khi người dùng click chuột lên phần tử nào đó của trang. Trong jQuery cú pháp để xử lý sự kiện nhấp chuột như sau:

$(selector).click(function (event) {
// mã lệnh
});

Ở hàm đặt bên trọng phương thức click bạn thấy có một tham số là event. Tham số này là một đối tượng được dùng để đặc trưng cho sự kiện người dùng đang thực hiện. Bạn có thể đặt tên cho tham số này một cách tuỳ ý nhưng thương thường tham số này được đặt với tên là event, evt hoặc đơn giản chỉ là e.

Ở ví dụ dưới chúng ta gọi phương thức preventDefault() của đối tượng sự kiện để ngăn cản trình duyệt mở ra trang liên kết.

$("p").click(function (e) {
   var text = $(this).text();
    alert("Bạn đã nhấp vào liên kết " + text);
    e.preventDefault();
});

Chạy

Nhấp Đúp

Bạn cũng có thể sử dụng jQuery để xử lý sự kiện nhấp đúp chuột (double click). Cú pháp xử lý sự kiện này tương tự như trên:

$(selector). dblclick(function (event) {
// mã lệnh
});

Ở ví dụ sau trình duyệt sẽ hiển thị một hộp cảnh báo khi người dùng nhấp đúp vào một đoạn văn bản.

$("#text").dblclick(function (e) {
   var text = $(this).text();
    alert("Bạn đã nhấp đúp vào: " + text);
});

Chạy

Gõ Bàn Phím

Sử dụng phương thức keypress trong đối tượng jQuery để có thể bắt sự kiện xảy ra khi người dùng thực hiện động tác gõ bàn phím.

$('input').keypress(function (e) {
    $("#character").text(e.keyCode);
});

Chạy

Ví dụ trên đây sử dụng thuộc tính keyCode trong đối tượng e để lấy giá trị mã số của ký tự người dùng nhập trên bàn phím.

Gửi Biểu Mẫu

Sử dụng phương thức submit trong jQuery giúp chúng ta có thể bắt sự kiện diễn ra ngay trước khi người dùng gửi đi một biểu mẫu.

$("form").submit(function (e) {
        alert("Xin chào " + $("input").val());
        e.preventDefault();
});

Chạy