Вызов обработчиков событий из программы

Для вызова обработчиков событий предназначены следующие методы:

  • trigger() — вызывает обработчик указанного события. Метод возвращает объект jQuery. Форматы метода:
trigger(<Тип события>[, <Массив данных>])
trigger(<Объект event>[, <Массив данных>])

В параметре <Тип события> указывается название события в виде строки:

<a href="#">Текст ссылки</a>
<button type="button" class="btn btn-primary"
        id="btn1">Кнопка</button>
$('a').on('click', function() {     // Обработчик
   window.alert('Событие onclick');
});
$('#btn1').on('click', function() {
   $('a').first().trigger('click'); // Вызываем обработчик
});

Вместо использования метода trigger() можно вызвать метод, соответствующий типу события:

$('a').first().click();             // Вызываем обработчик

Обратите внимание: при генерации события оно не имитирует событие Web-браузера, а только вызывает обработчики. Например, при генерации события click для ссылки не будет перехода по ссылке. Будут вызваны обработчики, назначенные с помощью методов on() и one(), а также обработчик, присвоенный свойству onclick. Обработчики, назначенные с помощью метода addEventListener(), вызваны не будут. Чтобы вызвать события Web-браузера, следует использовать JavaScript-методы для генерации событий:

$('a')[0].click();                  // Вызываем обработчик

Тем не менее, при генерации некоторых событий действия по умолчанию выполняются. Например, при генерации события select содержимое текстового поля будет выделено, а при генерации события submit форма будет отправлена:

<input type="text" id="txt1" class="form-control m-2">
<button type="button" class="btn btn-primary"
        id="btn1">Кнопка</button>
$('#btn1').on('click', function() {
   $('#txt1').trigger('select');
});

Если указан массив данных, то он будет передан в функцию обратного вызова. Каждый параметр будет соответствовать одному элементу массива:

<button type="button" class="btn btn-primary"
        id="btn1">Кнопка</button>
<div id="div1"></div>
<div id="log"></div>
$('#div1').on('myEvent.myNamespace', function(e, msg1, msg2) {
   $('#log')
     .append('Событие myEvent. ' + msg1 + ' ' + msg2 + '<br>');
});
$('#btn1').on('click', function() {
   $('#div1').trigger('myEvent.myNamespace', 
                      ['Сообщение1', 'Сообщение2']);
});

После щелчка на кнопке получим сообщение:

Событие myEvent. Сообщение1 Сообщение2

В параметре <Объект event> можно указать объект с дополнительными параметрами события, например, с кодом нажатой клавиши. Создать такой объект позволяет функция Event():

<Объект event> = $.Event(<Тип события>[, <Объект>])

Сгенерируем событие нажатия клавиши <b> и обработаем его:

<div id="div1"></div>
<button type="button" class="btn btn-primary"
        id="btn1">Кнопка</button>
$('#div1').on('keydown', function(e, d) {
   console.log('Событие keydown ' + e.which + ' ' + d);
});
$('#btn1').on('click', function() {
   var event = $.Event('keydown');
   event.which = 66;                    // Буква 'b'
   $('#div1').trigger(event, ['myData']);
});

Результат в окне консоли:

Событие keydown 66 myData

Дополнительные параметры и их значения можно также указать в виде объекта во втором параметре функции $.Event():

$('#btn1').on('click', function() {
   var event = $.Event('keydown', { which: 66 } );
   $('#div1').trigger(event, ['myData']);
});
  • triggerHandler() — вызывает обработчик указанного события. В отличие от метода trigger(), событие вызывается только для первого элемента коллекции. Кроме того, при использовании метода triggerHandler() не происходит действие по умолчанию и событие не всплывает. Форматы метода:
triggerHandler(<Тип события>[, <Массив данных>])
triggerHandler(<Объект event>[, <Массив данных>])

Все параметры аналогичны одноименным параметрам метода trigger(). В отличие от метода trigger(), метод triggerHandler() возвращает не объект jQuery, а данные, возвращенные последним обработчиком, или значение undefined. Пример:

<form action="#">
   <input type="text" name="txt1">
   <input type="submit" value="Отправить">
</form>
<input type="button" value="Вызвать обработчик" id="btn1">
$('form').on('submit', function(e, msg) {
   if (msg) {
      window.alert('Форма отправлена не будет. ' + msg);
   }
   else {
      window.alert('Форма будет отправлена');
   }
});
$('#btn1').on('click', function() {
   $('form').triggerHandler('submit', ['Наши данные']);
});

В данном примере щелчок на кнопке Вызвать обработчик приводит к запуску обработчика события onclick. Внутри обработчика мы вызываем событие onsubmit и передаем свои данные. На основании этих данных мы можем определить, вызвано ли событие при щелчке на кнопке Отправить или оно вызвано нами искусственно. Если переменная msg определена, то вызов события был произведен с помощью метода triggerHandler(). В этом случае после вывода сообщения данные формы отправлены не будут. Если щелкнуть на кнопке Отправить, то переменная msg будет не определена, и после вывода сообщения данные формы будут отправлены.

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов