Home > Web > jQuery Events – Đối tượng sự kiện ( Event object )

jQuery Events – Đối tượng sự kiện ( Event object )

Hàm hồi quy handler có thể mang nhiều tham số. Khi hàm được gọi, đối tượng event sẽ được truyền vào là tham số đầu tiên.

Đối tượng event thường không được sử dụng và phần tham số được bỏ qua.  Tuy nhiên trong một số trường hợp đối tượng này cần thiết để lấy thêm thông tin về môi trường của người dùng tại thời điểm sự kiện xảy ra như tọa độ con trỏ chuột (.pageX,.pageY), phím Shift có được ấn không (.shiftKey), …

Một handler return false tương đương với việc gọi cả hai phương thức .preventDefault() và .stopPropagation() của đối tượng event.

Ví dụ sau minh họa cách sử dụng event object trong một handler :

$(document).ready(function() {
    $('#foo').bind('click', function(event) {
       alert(Vi tri con tro chuoi la : ('
          + event.pageX + ', ' + event.pageY + ')');
    });
});

Bạn chú ý ở đây tham số event được thêm vào một hàm nặc danh ( anonymous function ) . Đoạn code trên sẽ hiển thị thông báo vị trí của con trỏ chuột khi người dùng click vào phần tử #foo.

Khởi tạo jQuery.Event:

jQuery.Event constructor được xác định và có thể sử dụng khi gọi trigger. Toán tử new là tùy chọn.

Ví dụ :

//Tạo 1 jQuery.Event không dùng toán tử new
 var e = jQuery.Event("click");
 // Gây ra một sự kiện click không phải do người dùng tạo ra
 jQuery("body").trigger( e );

Trong phiên bản jQuery 1.6, bạn có thể truyền một object vào jQuery.Event() và các thuộc tính của nó sẽ được thiết đặt khi tạo một đối tượng Event.

Ví dụ :

// Tạo một đối tượng jQuery.Event chỉ định thuộc tính của sự kiện 
 var e = jQuery.Event("keydown", { keyCode: 64 });
 // Gây ra một sự kiện keydown với keyCode 64
 jQuery("body").trigger( e );

Các thuộc tính Event ( Event Properties )

jQuery tiêu chuẩn hóa các thuộc tính sau đây để thống nhất trên các trình duyệt :

  • target
  • relatedTarget
  • pageX
  • pageY
  • which
  • metaKey

Các thuộc tính sau cũng được sao chép vào đối tượng event, mặc dù một số giá trị của chúng có thể không xác định (undefined) tùy thuộc vào sự kiện :

altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which

Các thuộc tính khác :

Tất nhiên là mỗi sự kiện sẽ có những thuộc tính riêng chỉ định cho nó. Chúng có thể được truy cập như là các thuộc tính của đối tượng event.originalEvent. Để tạo các thuộc tính có hiệu lực trong tất cả các đối tượng sự kiện, chúng có thể được thêm vào mảng jQuery.event.props. Việc này không được khuyến khích vì rằng nó được thêm vào trước mỗi sự kiện được dẫn xuất bởi jQuery.

Ví dụ bạn muốn thêm thuộc tính datatransfer để dùng với sự kiện drop tự nhiên để bắt thông tin về các file được kéo vào cửa sổ trình duyệt :

jQuery.event.props.push(“datatransfer”);
Advertisements
Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: