The bind() method

Một trong những khía cạnh quan trọng của event trong jQuery là dùng phương thức bind() và unbind(). Như tên của chúng chỉ ra, là cách gắn và bỏ code của một hay nhiều event với một tập các elements. Chúng ta đã cùng xem ví dụ rất đơn giản về bind(), và giờ là ví dụ hoàn chỉnh hơn:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
$(function()
{
	$("a").bind("click", function() {
		alert($(this).text());
	});
});
</script>

Nó chọn toàn bộ đường dẫn (<a>) và sau đó truyền hàm nặc danh vào trong sự kiện click. jQuery tự động gán vào element được click vào từ khóa "this" .

Khi jQuery gọi phương thức, nó sẽ truyền thông tin về sự kiện vào tham số đầu tiên, nếu bạn định nghĩa một hay vài tham số trong đó. Ví dụ, sự kiện sẽ chứa thông tin về vị trí con trỏ chuột, hay nút bấm bàn phím ... Bạn có thể xem ở đây: http://api.jquery.com/event.which/

Here is an example:

<div id="divArea" style="background-color: silver; width: 100px; height: 100px;">
</div>
<script type="text/javascript">
$("#divArea").bind("mousemove", function(event)
{
	$(this).text(event.pageX + "," + event.pageY);
});
</script>

Chúng ta khởi tạo div với kích thước hợp lý và màu nền. Chúng ta sẽ gửu tới sự kiện di chuột, với hàm nặc danh có tham số gọi là "event". Đối tượng này cho phép chúng ta truy cập vào thuộc tính pageX và pageY cho phép chúng ta biết vị trí của con trỏ chuột hiện tại tương ứng với vị trí trái trên cùng của trang. Hãy thử ví dụ và di con trỏ chuột trong div và bạn sẽ thấy sự thay đổi khi di chuyển con trỏ.

Phương thức bind() cho phép bạn truyền dữ liệu và truy cập vào nó từ đối tượng event. Bạn có thể đặt giá trị tại thời điểm bạn truyền event và có thể đọc giá trị này tại thời điểm event được thực hiện thậm chí có thể thay đổi giá trị ban đầu. Ví dụ:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
	$("a").bind("click", { message : msg }, function(event) {
		msg = "Changed msg";
		alert(event.data.message);
	});
});
</script>

Ta truyền giá trị là tham số thứ hai của phương thức bind(), như một cặp khóa/giá trị. Bạn có thể truyền nhiều hơn một giá trị và khai báo thông qua dấu phẩy. Để truy cập vào giá trị trong sự kiện bạn có thể dùng thuộc tính dât của đối tượng event. Thuộc tính này chứa các thuộc tính con, có nghĩa bạn có thể truy cập vào giá trị của message bằng event.data.message.

Despite the fact that we change the value of the "msg" variable inside the event handler, the message displayed will still be "Hello, world!" every time you click on one of the links, because it's evaluated as soon as the event handler is bound, which is once the page has been loaded.