Jquery Events

Bài đăng này đã không được cập nhật trong 7 năm

1. Jquery Event là gì?

Tất cả các hành động của người truy cập mà trang web có thể trả lời được gọi là event (sự kiện) . Ví dụ :

Click vào button
Di chuyển chuột
Chọn một nút radio button
Load một trang web ...

2. Tạo và xử lý Jquery event

Trong một trang web, trình duyệt sẽ quản lý cách thức hiển thị của trang tương ứng với các thẻ đánh dấu (HTML và CSS) mà chúng ta gửi cho nó. Phần mã kịch bản chúng ta thêm vào trang sẽ định nghĩa các hành vi của giao diện đó. Các mã kịch bản này là dạng event handler, hay còn được gọi là các listener. Chúng có nhiệm vụ lắng nghe và đáp ứng lại các sự kiện khác nhau trong suốt quá trình trang được hiển thị. Các sự kiện này có thể được sinh ra bởi hệ thống nhưng hầu hết chúng thường là kết quả của các thao tác từ người dùng (như di chuyển hay nhấn chuột, gõ phím,…). Mặc dù HTML tự nó đã định nghĩa sẵn một vài hành vi mà không cần bất kì mã kịch bản nào từ phía chúng ta (như tải trang khi nhấn một siêu liên kết, gửi một form khi nhấn nút submit), tuy nhiên để tạo ra được một trang web với đầy đủ những trình diễn và xử lý theo ý muốn thì bắt buộc bạn phải nắm bắt và quản lý các sự kiện khác nhau xảy ra trong quá trình người dùng thao tác trên trang.Trong phần này chúng ta sẽ học cách tạo và xử lý trên trang thông qua jQuery.

Binding event handlers

Cú pháp :

 selector.bind( eventType[, eventData], handler)

Tham số:

eventType: một chuỗi chứa kiểu sự kiện ,ví dụ như click hoặc submit.
eventData: (tùy chọn) danh sách dữ liệu sẽ truyền cho event hanlder
handler: Một hàm để thực thi mỗi lần sự kiện xảy ra.

Mô tả:

Phương thức bind() là cách thức chủ yếu để gắn các hành vi vào trong code. Tất cả kiểu sự kiện Jquery được chấp nhận cho tham số eventType , ví dụ như : blur , click , dbclick , focus , load , mousedown ...Khi sự kiện xảy ra trên phần tử, tất cả handler đã gắn cho kiểu sự kiện của phần tử sẽ được kích hoạt. Nếu có nhiều handler được tạo , chúng sẽ được thực thi theo thứ tự khi chúng được gắn vào

Ví dụ :

Khi người dùng click vào các thẻ div thì alert sẽ được hiển thị ra màn hình :

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>

      <p>Click on any square below to see the result:</p>

      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>

   </body>

</html>

Removing event handlers

Thông thường, khi một xử lý sự kiện được thiết lập, nó vẫn có hiệu lực cho đến khi rời khỏi trang . Có thể bạn muốn loại bỏ xử lý sự kiện , jQuery cung cấp () lệnh unbind để loại bỏ một xử lý sự kiện.

Cú pháp :


selector.unbind(eventType, handler)

or

selector.unbind(eventType)

Mô tả :

eventType: một chuỗi chứa kiểu sự kiện ,ví dụ như click hoặc submit.
handler: Một hàm để thực thi mỗi lần sự kiện xảy ra.

Event Object

Chúng ta thấy hàm eventHandler có một đối số e ở bên trong. Đó là Event Object, bạn có thể đặt một tên bất kỳ cho tham số sự kiện này. Ở đây nó không được sử dụng, tuy nhiên một số trường hợp lại cần thiết để lấy tọa độ con trỏ chuột hoặc ngăn hành vi mặc định của sự kiện..

Ví dụ :

$(document).click( function ( e ){
  alert ( “pageX is: “+ e.pageX + “pageY is: “ +  e.pageY);
});

Với code trên, khi ta click vào một vị trí bất kỳ trên trang thì một hộp thông báo tọa độ theo trục X và trục Y của con trỏ chuột hiện ra.

Tọa độ theo trục X hiểu là khoảng cách từ con trỏ chuột tới lề trái của trang, còn tọa độ theo trục Y là khoảng cách tới Top của trang. pageX, pageY là các thuộc tính của event object, ngoài ra còn có các thuộc tính và phương thức khác như: type, target, clientX, clientY, timestamp, preventDefault(), stopPropagation()... tùy thuộc vào từng sự kiện cụ thể.

Ví dụ phương thức : PreventDefault()

Đây là một phương thức của event Object ở trên. Nó không có tham số, dùng để ngăn chặn hành vi mặc định của sự kiện.

Ví dụ :

$(document).ready( function(){
   $(window).contextmenu( function( e ){
          //code ở đây
          e.preventDefault();
   });
});

Contextmenu() : là sự kiện khi ta click chuột phải trên trang web. Hành vi mặc định của trình duyệt là một menu sẽ hiện ra với lựa chọn như tải lại hoặc mở tab mới... Tuy nhiên khi sử dụng e.preventDefault() thì không menu nào được hiện ra cả. Hàm preventDefault() có tác dụng rõ rệt khi ta submit một form và ngăn nó không tự động chuyển trang. Có thể sử dụng return false trong eventHandler để thay thế cho hàm preventDefault(). Chúng có tác dụng như nhau

Một số loại sự kiện hay gặp

Sự kiện chuột: click(), hover(), mouseout(), mousedown(), mouseup(), mouseover()...
Sự kiện Form: blur(), focus(), change(), submit(), select()...
Sự kiện bàn phím: là các sự kiện xảy ra khi ta nhấn một phím hay tổ hợp phím nào đó: keydown((), keyup(), keypress()...
Sự kiện trình duyệt: được kích hoạt khi ta tương tác với cửa sổ trình duyệt như scroll()– cuộn trang, hay resize() – kích thước cửa sổ thay đổi.

Hi vọng bài viết hữu ích với bạn !!!

Mục lục