Почему и как создавать пользовательские события 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.

Есть много других способов сделать это, и вы можете делать с ним довольно сложные вещи; однако это должно предоставить достаточно информации для того, что вам нужно, о том, как работать с пользовательскими событиями на фундаментальном уровне.