Триггеры или принудительная генерация событий в jQuery

Триггер — это специальный обработчик, который запускается не пользователем, а наступлением определенного события или действием. В jQuery триггеры прикрепляются к селектору и запускают функцию.

Например, .click() — это событие, прикрепленное к селектору. И так же вызывает функцию.

Вот только .click() начнет выполнение только при клике, а триггер выполнится и будет ждать только своего запуска определенным событием. Например, тем же click.

Для работы с тригеррами в jQuery имеются следующие функции:

• .bind ( eventType, {eventData}, handler(eventObject) ) — добавляет обработчик событий;
• .one ( eventType, {eventData}, handler(eventObject) ) — добавляет обработчик событий, который сработает лишь раз;
• .unbind ( eventType, handler(eventObject) ) — удаляет все обработчики событий с элемента;
• .trigger ( eventType, [extraParameters] ) — вызывает обработчики событий;
• .triggerHandler ( eventType, [extraParameters] ) — вызывает обработчики событий, без вызова события браузера.

.bind ( eventType, {eventData}, handler(eventObject) )

Добавляет обработчик событий.

• eventType — это javascript события, такие как «click» или «submit»;
• handler(eventObject) — функция, которую запускает обработчик;
• eventData — аргумент, позволяющий передавать доп. информацию обработчику.

$('#foo').bind('click', function() {
	// Кликнули на #foo.
});

Несколько событий:

$('#foo').bind('click mouseover', function() {
	// Кликнули или навели курсор на #foo.
});
$('#foo').bind({
	click: function(){
		// Кликнули на #foo.
	},
	mouseover: function(){
		// Навели курсор на #foo.
	}
});

А теперь самое интересное. Передача дополнительной информации обработчику.

Посмотрите на пример:

var message = 'Сообщение';
$('#foo').bind('click', function(){
	alert(message);
});
message = 'Новое сообщение';
$('#bar').bind('click', function(){
	alert(message);
});

Задача такова, чтобы первый обработчик принял первое сообщение, второй — второе. Решается данная задача при помощи дополнительной информации, eventData.

var message = 'Сообщение';
$('#foo').bind('click', {msg:message}, function(event){
	alert(event.data.msg);
});
message = 'Новое сообщение';
$('#bar').bind('click', {msg:message}, function(event){
	alert(event.data.msg);
});

.one ( eventType, {eventData}, handler(eventObject) )

Добавляет обработчик событий, который сработает лишь раз.

cм. bind

Отличие данного события от bind лишь в том, что .one() запускается один раз.

.unbind ( eventType, handler (eventObject) )

Удаление обработчиков событий.

Мы можем в начале задать обработчик, а затем его удалить:

$('#foo').bind('click', function(){
	alert('Клик');
});
$('#foo').unbind();

Можем удалить все обработчики привязанные к клику:

$('#foo').bind({
	click: function(){
		alert('Клик');
	},
	mouseover: function(){
		alert('Навели курсор');
	}
});
$('#foo').unbind('click');

Можем удалить определенную функцию, привязанную к обработчику при помощи клика:

var one = function(){ alert('one'); };
var two = function(){ alert('two'); };
$('#foo')
	.bind('click', one)
	.bind('click', two);
$('#foo').unbind('click', one);

Можем вначале выполнить обработчик, и только тогда его удалить. Таким образом, функция выполнится один раз:

$('#foo').bind('click', function (){
	alert('Клик');
	$('#foo').unbind('click');
});
// Результат будет одинаковым, если использовать событие one
$('#foo').one('click', function (){
	alert('Клик');
});

.trigger ( eventType, [extraParameters] )

Вызываем обработчик события.

Мы добавляем обработчик события, а затем можем его вызвать:

$('#foo').bind('click', function (){
	alert('Клик по #foo');
});
$('#foo').trigger('click');

• extraParameters — массив параметров, передаваемых обработчику.

Создаем обработчик, функция которого принимает больше чем один параметр:

$('#foo').bind('click', function (event, param1, param2){
	alert('Параметр 1: ['+param1+'] и параметр 2: ['+param2+'');
});

Так вот событие .trigger() умеет передавать эти параметры в виде массива:

$('#foo').bind('click', function (event, param1, param2){
	alert('Параметр 1: ['+param1+'] и параметр 2: ['+param2+'');
});
$('#foo').trigger('click', ['один', 'два']);

.triggerHandler ( eventType, [extraParameters] )

Вызывает обработчики событий, без вызова события браузера.

cм. trigger

Работает как и trigger, только после завершения своего события останавливает события браузера.

Так же может передавать массив параметров обработчику.

Завершение

В этой статье мы узнали определение, что такое триггер (trigger). Узнали, какие события в jQuery работают с триггерами, а также познакомились с ними.

• .bind ( eventType, {eventData}, handler(eventObject) ) — добавляет обработчик событий;
• .one ( eventType, {eventData}, handler(eventObject) ) — добавляет обработчик событий, который сработает лишь раз;
• .unbind ( eventType, handler(eventObject) ) — удаляет все обработчики событий с элемента;
• .trigger ( eventType, [extraParameters] ) — вызывает обработчики событий;
• .triggerHandler ( eventType, [extraParameters] ) — вызывает обработчики событий, без вызова события браузера.