Работа с функциями bind, unbind и объектом-событием
Мы проведем лишь краткий обзор представленных функций, поскольку их применение оправдано в довольно редких ситуациях. В случае острой необходимости, дополнительную информацию по данным функциям всегда можно отыскать в специальной литературе, посвященной 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+"<br/>event timestamp:
"+event.timeStamp+"<br/>event x: "+event.pageX+"<br/>event y: "+event.
pageY);
});
...
Еще одна функция объекта-события, которая может оказаться полезной в дальнейшей работе – preventDefault(). Она может отменить стандартное действие элемента.
| .preventDefault() | jQuery(.post a).preventDefault(); | Предотвращает выполнение стандартных действий, определенных браузером, для выбранных элементов. |
| .ispreventDefault() | jQuery(.post a).ispreventDefault(); | Возвращает истину или ложь, в зависимости от того, установлена или нет функция ispreventDefault на выбранном наборе элементов. |
