Навіщо та як спеціальні події jQuery

Ще у версії 1.0 jQuery надав функцію тригера, яка дозволяє:

Виконати всі обробники та поведінку, прикріплені до відповідних елементів для даного типу події.

Але лише у версії 1.3 ця конкретна функція стала значно кориснішою, принаймні, що стосується мене. Я кажу це тому, що саме тоді ми отримали можливість визначати власні події, а потім встановлювати для них обробники.

Однак який імовірний випадок використання, у якому спеціальні події jQuery корисні в контексті WordPress? На голову ви можете придумати багато. А може й ні.

Останнім часом я використовував їх набагато частіше, ніж зазвичай. Тож я вирішив поділитися тим, як я ними користуюся, чи не для того, щоб показати вам, як підключити їх до вашої роботи.

Спеціальні події jQuery

Якщо ви маєте досвід роботи з JavaScript, незважаючи на те, що він вільний, ви, швидше за все, знайомі з базовими обробниками подій. Тобто, коли хтось натискає на елемент, ми маємо функцію, налаштовану на запуск, яка щось робить.

Спеціальні події jQuery багато в чому схожі на це, за винятком того, що це події, які ми визначаємо. Це означає, що нам не потрібно покладатися на те, коли хтось наводить курсор миші на елемент або клацає елемент.

Замість цього ми можемо ініціювати подію, а потім налаштувати обробник для відповідної відповіді. Ось приклад.

Підготовка до спеціальної події

Припустімо, що ви працюєте над проектом і він має сторінку адміністрування, яка відповідає за отримання даних із стороннього API. Потік керування виглядатиме приблизно так:

1. Користувач натискає кнопку,
2. Ініціюється запит Ajax, який запитує інформацію від третьої сторони,
3. Поки виконується запит, кнопки на екрані повинні бути вимкнені,
4. Після завершення запиту кнопки можна знову ввімкнути,
5. За бажанням на екран можна вивести повідомлення про статус.

Щоб це сталося, він очікує, що є принаймні одна кнопка (як у елементі введення) і необов’язкове текстове поле або текстове поле, у якому може відбуватися статус запиту.

Щойно користувач натискає подію, ми можемо ініціювати спеціальну подію. Ми можемо назвати цю подію acme.ajax.processing. Тоді ми можемо використати функцію done, надану jQuery, щоб обробити все, що ми хочемо очистити згодом, або ми можемо використати нашу спеціальну функцію, якщо є щось, що ми також хочемо обробити в кінці.

Для цього ми розглянемо обидва. Тож у нас також буде подія під назвою acme.ajax.complete.

Тому нас турбує:

• створення спеціальної події,
• запускаючи його,
• налаштування обробника подій для нього,
• завершуючи після завершення запиту.

І це ми зробимо.

Визначення спеціальної події

Отже, коли користувач натискає кнопку, робиться запит Ajax. Водночас це також ініціює подію acme.ajax.processing, яка матиме свій обробник подій.

Отже, спочатку створимо запит Ajax. Для цього я припускаю, що кнопка, відповідальна за ініціювання запиту Ajax, називається просто $button:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  });
});

Зверніть увагу, що перше, що ми хочемо зробити, це ініціювати подію обробки, а потім робити запит.

Обробка спеціальної події

Далі ми хочемо переконатися, що у нас є обробник події, налаштований на відключення кнопки під час виконання запиту.

Це легко зробити, і я збираюся вимкнути цю кнопку:

$(document).on('acme.ajax.processing', function() {
  $button.attr('disabled', 'disabled');
});

Легко, правда?

Обробка іншої спеціальної події

Далі нам потрібно вирішити ситуацію, коли запит Ajax виконано. Тому нам потрібно переконатися, що подія ініціюється, а потім нам потрібно обробити подію.

Запустити подію легко:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  })
  .done(function() {
     $(document).trigger('acme.ajax.complete');
  });
});

І обробку події можна змінити на код, який у нас уже є:

$(document)
  .on('acme.ajax.processing', function() {
    $button.attr('disabled', 'disabled');
  })
  .on('acme.ajax.complete', function() {
    $button.removeAttr('disabled');
  });

Його можна зв’язати, оскільки це відбувається на об’єкті документа, а не на окремому елементі.

З цією метою набагато легше впоратися.

Лише один приклад

Звичайно, це лише один приклад того, як обробляти власні події jQuery.

Є багато інших способів зробити це, і ви можете робити деякі досить складні речі з цим; однак це має надати достатньо інформації для того, що вам потрібно про те, як працювати з користувацькими подіями на фундаментальному рівні.