Этот пост — перевод статьи Брэндона Аарона (Brandon Aaron) Special Events, в котором он рассказывает об использовании специальных событий jQuery и приводит пример создания обработчика тройного клика мышкой.
jQuery, начиная с версии 1.2.2, имеет API для создания "специальных событий". Эти события называются специальными, потому что позволяют выполнять некоторые дополнительные действия при их возникновении, а также имеют опцию, позволяющую обходить внутреннею систему событий jQuery. Используя эти специальные события вы можете создавать пользовательские события, которые требуют выполнения каких-то действий перед началом работы (при установке) или должны переопределять поведение встроенных событий.
Мы использовали специальные события jQuery для создания событий “mouseenter” и “mouseleave”, а также для создания события “ready” и для нормализации события “mousewheel” в плагине mouse wheel.
Специальное событие: “tripleclick” (тройной клик).
Для иллюстрации API я собираюсь создать новый тип события под названием "tripleclick" (тройной клик). Это событие будет возникать когда пользователь кликнет по элементу три раза. Если бы мы собирались сделать это событие обычным jQuery плагином мы бы создали jQuery.fn.tripleclick. Но я хочу использовать преимущества синтаксиса bind вместе с другими возможностями, которые предоставляет система событий jQuery, такими как нормализация события, данные и пространства имен.
Прежде всего нам необходимо создать специальное событие. Каждое такое событие имеет методы setup и teardown. Метод setup вызывается когда происходит присоединение события (bind), а teardown — когда событие отсоединяется.
Важно отметить, что эти два метода вызываются только при первом присоединении (отсоединении) события определенного типа к определенному элементу. Это происходит потому, что система событий jQuery в действительности присоединяет только один обработчик каждого типа к каждому элементу и сама управляет остальными присоединенными обработчиками. В jQuery 1.3 есть новый тип специального события под названием "Special All", который работает со всеми обработчиками, но у него немного другое поведение. И эта тема для другой статьи.
Основа события "tripleclick" выглядит следующим образом.
jQuery.event.special.tripleclick = {
setup: function(data, namespaces) {
var elem = this;
},
teardown: function(namespaces) {
var elem = this;
}
};
Отметьте, что методу setup событие передает данные и пространство имен, которые мы используем при присоединении события. Точно также методу teardown событие передает пространство имен, которое используется при отсоединение события. Хотя, от них здесь пользы не много, т.к. только данные и пространство имен связанные с самым первым обработчиком события будут присоединены к определенному элементу страницы. Но вы можете использовать эти данные для того, чтобы сконфигурировать событие для всех обработчиков этого типа, присоединенных к элементу. Областью видимости, или значением this, этих двух методов является элемент к которому присоединяется событие.
Фактически мы будем использовать встроенное события "click" для того, чтобы отслеживать количество кликов по элементу. Кроме того, нам нужен обработчик, который и будет выполнять работу отслеживания кликов. Я собираюсь добавить третий метод под названием handler для специального события "tripleclick". Чтобы сделать код немного проще я буду отслеживать количество кликов используя jQuery data API.
Обновленное специальное событие выглядит следующим образом.
jQuery.event.special.tripleclick = {
setup: function(data, namespaces) {
var elem = this, $elem = jQuery(elem);
$elem.bind('click', jQuery.event.special.tripleclick.handler);
},
teardown: function(namespaces) {
var elem = this, $elem = jQuery(elem);
$elem.unbind('click', jQuery.event.special.tripleclick.handler);
},
handler: function(event) {
var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
clicks += 1;
if ( clicks === 3 ) {
clicks = 0;
// устанавливаем тип события "tripleclick"
event.type = "tripleclick";
// позволяем jQuery запустить обработчики события "tripleclick"
jQuery.event.handle.apply(this, arguments)
}
$elem.data('clicks', clicks);
}
};
Рассмотрим код обработчика (handler). Прежде всего мы определяем количество кликов с помощью data API и увеличиваем его на 1. Затем мы проверяем, было ли выполнено три клика. Если да, сбрасываем счетчик кликов и запускаем другие обработчики событий. Наконец сохраняем новое значение количества кликов по элементу с помощью data API.
Обработчик должен установить тип события "tripleclick" потому что на самом деле мы работаем с событием click. jQuery использует тип события для того, что определить какой обработчик она должна вызвать, и мы хотим чтобы были вызваны обработчики нашего события "tripleclick".
Пример
Мы можем использовать метод bind с нашим специальным событием точно также как и с любым другим. Например, присоединить событие "tripleclick" к div'у можно с помощью следующего кода.
jQuery('div').bind('tripleclick', function(event) {
alert('triple clicked');
});
Посмотреть пример использования нашего специального события вы можете здесь.
Вы можете улучшить событие сделав так, чтобы все клики выполнялись в течении заданного промежутка времени. Этого можно достичь сохраняя свойство event.timeStamp предыдущего клика и сравнивая разницу времени между ним и последним кликом.
Возвращаемое значение
Я упоминал в начале этой статьи, что специальные события имеют возможность обходить внутреннею систему событий jQuery. В набор функций, которые можно пропустить входит непосредственно присоединение события с использованием методов addEventListener или attachEvent. Будут они пропущены или нет зависит от возвращаемого значения. Любое значение кроме false запрещает jQuery непосредственно присоединять событие к элементу. Другими словами если вы добавите return false в методы setup и teardown вашего специального события, оно будет использовать родные DOM API для присоединения события элементу. В случае нашего события "tripleclick" мы не хотим привязывать событие используя родные DOM API, поэтому мы не возвращаем ничего (undefined).
Полезные ресурсы
Логос-Аудит — бухгалтерское обслуживание фирмы для экономных.
