Работа с функциями bind, unbind и объектом-событием | Статьи, новости, обзоры плагинов, тем club762.ru

Мы проведем лишь краткий обзор представленных функций, поскольку их применение оправдано в довольно редких ситуациях. В случае острой необходимости, дополнительную информацию по данным функциям всегда можно отыскать в специальной литературе, посвященной jQuery.

Иногда вам понадобится получить более полный контроль над некоторыми событиями. Сделать это можно при помощи удобных функций bind() и unbind(). Вы можете передавать в них параметры, отвечающие за типы событий (click, mouseenter и др.), данные, а также обработчики событий (или вызывать другую функцию). Данные являются дополнительным параметром; их рассмотрение выходит за рамки этого курса.

.bind(event type, data, functionName)	jQuery(«.post»).bind(«mouseenter», function(){//code});	Привязывает к выбранным элементам функцию, которая будет вызвана по заданному событию.
.unbind(event type, functionName)	jQuery(«.post»).unbind(«mouseenter», function(){//code});	Удаляет обработку события у выбранных элементов.

В предыдущей статье мы реализовали эффект подсветки пунктов с помощью функции hover(). Теперь мы попробуем сделать то же самое с помощью функций bind() и unbind(). Данный способ является не самой изящной реализацией простого эффекта наведения — он слишком громоздкий. Однако иногда такое решение бывает востребовано.

Основное преимущество функции bind() состоит в том, что вы можете передавать в нее данные. В следующем примере мы передадим данные, а именно цвет нашего фона, в функцию события:

...
  jQuery(".widget-area li ul li").bind("mouseenter", {color: "#f60"}, 
function(event){
      jQuery(this).css("background", event.data.color);
         jQuery(this).unbind("mouseleave");
  });
  jQuery(".widget-area li ul li").bind("mouseleave", function(){
      jQuery(this).css("background", "none");
      jQuery(this).unbind("mouseenter");
  });
...

В предыдущем примере, для того чтобы передать данные, мы воспользовались объектом-событием. Объединенный объект-событие помогает передать информацию о возникшем событии в функцию, сохраняя исходный код понятным и чистым, что позволяет быстро отыскивать и устранять ошибки.

event.type	Возвращает тип события (mouseenter, keyup и т.д.)
event.target	Возвращает выбранный элемент, который инициировал событие.
event.data	Возвращает дополнительные данные, переданные через функцию bind.
event.pageX, .pageY	Определяет позицию курсора мыши относительно левого края (pageX) или верхнего края (pageY) документа.
event.result	Возвращает последнее значение, которое было возвращено обработчиком событий. Полезно для поиска и устранения ошибок.
event.timeStamp	Возвращает временную метку (timestamp) Unix, когда событие было инициировано.

Следующий код будет выводить атрибуты объекта-события по щелчку:

...
jQuery(".post").click(function(event){
    jQuery(this).html("event type: "+event.type+"&lt;br/&gt;event timestamp: 
"+event.timeStamp+"&lt;br/&gt;event x: "+event.pageX+"&lt;br/&gt;event y: "+event.
pageY);
});
...

Еще одна функция объекта-события, которая может оказаться полезной в дальнейшей работе — preventDefault(). Она может отменить стандартное действие элемента.

.preventDefault()	jQuery(.post a).preventDefault();	Предотвращает выполнение стандартных действий, определенных браузером, для выбранных элементов.
.ispreventDefault()	jQuery(.post a).ispreventDefault();	Возвращает истину или ложь, в зависимости от того, установлена или нет функция ispreventDefault на выбранном наборе элементов.