Метод bind()

Один из наиболее важных аспектов при работе с событиями через jQuery - это методы bind() и unbind(). Как следует из названий этих методов, они позволяют привязать и отвязать одно или несколько событий к набору элементов. Мы видели очень простой пример использования метода bind() в вводном параграфе, а вот более сложный:

<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>

Здесь мы выбрали все ссылки (элементы <a>) и затем привязали анонимную функцию к событию click. Классная небольшая фишка состоит в том, что jQuery автоматически привязывает элемент, по которому осуществлен клик, к ключевому слову this внутри анонимной функции. Это позволяет получить доступ именно к активированному элементу, даже если вы привязываете событие к нескольким разным элементам.

Когда jQuery вызывает ваш метод, он передает информацию о событии event в качестве первого параметра, если вы задали один или более параметров. Например, объект event может содержать информацию о положении курсора мыши, какой тип события возник, какая кнопка мыши или клавиатуры была нажата (если была) и многое другое. Вы можете посмотреть все свойства и методы событий в объекте event здесь: http://api.jquery.com/event.which/

Вот пример:

<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>

Мы создали элемент div с подходящим размером и цветом фона. Для этого div мы подписались на событие mousemove (движение мыши) через анонимную функцию с одним параметром "event". Этот объект дает нам доступ к свойствам pageX и pageY, которые сообщают, в каких координатах на странице (page) сейчас находится курсор мыши, отсчитывая от верхнего левого угла документа. Попробуйте запустить этот пример и провести курсор над элементом div, и вы увидите как координаты обновляются, когда вы перемещаете мышь.

Метод bind() также позволяет вам передавать свои собственные данные и получать к ним доступ из объекта event. Это также позволяет вам задавать значения в то время, как вы выполняете привязку, и считывать эти значения в момент возникновения события, даже если само это значение в соответствующей переменной уже изменилось. Вот пример, как это можно сделать:

<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>

Мы передаем значение второго параметра в метод bind() как карту (map) ключей (key) и значений (value). Вы можете передать более одного значения, отделив их запятой. Чтобы получить доступ к значениям внутри обработчика события, мы используем свойство data объекта event. Это свойство содержит подсвойства для каждого переданного значения, что означает, что вы можете получить доступ к параметру message через event.data.message.

Помимо того факта, что мы изменили значение переменной "msg" внутри обработчика события, отображаемое событие будет "Hello, world!" при каждом клике по ссылке, поскольку оно было задано в момент привязки события, при загрузке страницы.