Sự Kiện

Nguyễn Đạt

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

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan

  • JavaScript Object Oriented

    Lập trình hướng đối tượng là một phương pháp lập trình phổ biến hiện nay. Trong khoá học JavaScript...
  • AngularJS Cơ Bản

    AngularJS là một khung làm việc JavaScript phổ biến để tạo ra các ứng dụng 1 trang single page appli...
  • Học AJAX

    Trong khoá học này chúng ta sẽ tìm hiểu về cách sử dụng AJAX, cách thay đổi nội dung của trang web m...
  • JavaScript Cơ Bản

    JavaScript là ngôn ngữ kịch bản hướng đối tượng được sử dụng trong hầu hết các website trên thế giới...