Зачем и как создавать пользовательские события jQuery
Еще в версии 1.0 jQuery предоставила функцию триггера , которая позволяет нам:
Выполнять все обработчики и поведения, прикрепленные к соответствующим элементам для данного типа события.
Но только в версии 1.3 эта конкретная функция стала значительно полезнее, по крайней мере, насколько я понимаю. Я говорю это потому, что именно тогда мы получили возможность определять пользовательские события, а затем устанавливать для них обработчики.
Каков, однако, вероятный вариант использования, в котором пользовательские события jQuery полезны в контексте WordPress? Навскидку вы можете придумать много. А может и нет.
До недавнего времени я использовал их значительно чаще, чем обычно. Поэтому я решил поделиться тем, как я их использую, хотя бы по другой причине, кроме как показать вам, как подключить их к вашей работе.
Пользовательские события jQuery
Если у вас есть опыт работы с JavaScript — ванильным или нет — вы, вероятно, знакомы с основными обработчиками событий.
То есть, когда кто-то нажимает на элемент, у нас срабатывает функция, которая делает что-то .
Пользовательские события jQuery во многом похожи, за исключением того, что это события, которые мы определяем. Это означает, что нам не нужно полагаться на то, когда кто-то наводит указатель мыши на элемент или когда он щелкает элемент.
Вместо этого мы можем инициировать событие, а затем настроить обработчик для соответствующего ответа. Вот пример.
Подготовка к пользовательскому событию
Допустим, вы работаете над проектом, и у него есть страница администрирования, отвечающая за получение данных из стороннего API. Поток управления будет выглядеть примерно так:
- Пользователь нажимает кнопку,
- Запрос Ajax инициирован и запрашивает информацию у третьей стороны,
- Во время выполнения запроса кнопки на экране должны быть отключены,
- После завершения запроса кнопки можно снова активировать,
- При необходимости на экран можно вывести сообщение о состоянии.
Чтобы это произошло, требуется, чтобы была хотя бы одна кнопка (как в элементе input ) и необязательное текстовое поле или текстовая область , в которой может происходить статус запроса.
Как только пользователь нажимает на событие, мы можем запустить пользовательское событие. Мы можем назвать это событие
Для этого обоих мы рассмотрим оба. Так что у нас также будет событие под названием acme.ajax.complete .
Итак, нас интересует:
- создание пользовательского события,
- запуск,
- настройка обработчика событий для него,
- завершается после завершения запроса.
Так мы и поступим.
Определение пользовательского события
Таким образом, когда пользователь нажимает кнопку, выполняется запрос Ajax. В то же время это также вызовет acme.ajax.processing , у которого будет свой обработчик событий.
Итак, сначала давайте создадим запрос Ajax. Для этого я предполагаю, что кнопка, отвечающая за запуск Ajax-запроса, называется просто $button:
Посмотреть код на Gist.
Обратите внимание, что первое, что мы хотим сделать, это инициировать событие обработки , затем мы делаем запрос.
Обработка пользовательского события
Далее мы хотим убедиться, что у нас настроен обработчик событий, отключающий кнопку во время выполнения запроса.
Это легко сделать, и для простоты я собираюсь отключить кнопку:
Посмотреть код на Gist.
Легко, правда?
Обработка другого пользовательского события
Далее нам нужно обработать ситуацию, когда Ajax-запрос завершен.
Поэтому нам нужно убедиться, что событие инициировано, а затем нам нужно обработать событие.
Инициировать событие очень просто:
Посмотреть код на Gist.
А обработку события можно изменить на код у нас уже есть:
Посмотреть код на Gist.
Это может быть связано, потому что это происходит с объектом документа , а не с отдельным элементом.
С этой целью, так намного проще обращаться.
Только один пример
Конечно, это всего лишь один пример того, как обрабатывать пользовательские события jQuery.
Есть много других способов сделать это, и вы можете делать с ним довольно сложные вещи; однако это должно предоставить достаточно информации для того, что вам нужно, о том, как работать с пользовательскими событиями на фундаментальном уровне.
Делегировать обработчики событий jQuery при работе с динамическим содержимым
Если вы имели удовольствие загружать элементы динамически (через AJAX) с помощью jQuery, вы могли столкнуться с проблемами, когда обработчики событий для динамически загружаемых элементов, казалось бы, перестают работать.
только что загруженные предметы.
Я был там и помню, как это было неприятно, когда я впервые столкнулся с этим, поэтому я обращаюсь к этому самому сценарию с некоторыми примерами кода, которые вы можете использовать.
В чем проблема?
Как правило, мы выбираем элементы DOM и связываем обработчики событий с document.ready , и в целом это нормально. Если, однако, мы добавим новые элементы в DOM, jQuery не будет связывать для нас какие-либо необходимые обработчики событий. Это означает, что нам нужно привязать обработчики к вновь добавленным элементам, которые, если мы не будем осторожны, можем в конечном итоге несколько раз привязать один и тот же обработчик к элементам, уже находящимся в DOM.
Распространение события + делегирование как чистое исправление
Более чистый способ воспроизвести это — использовать распространение событий, т. е. событие, «пузырящееся» по дереву DOM, и привязать наш обработчик к элементу, находящемуся выше по иерархии DOM.
Это в основном позволяет нам связать функцию для обработки событий, которые запускаются для дочернего элемента, внука, правнука (вы поняли идею).
Любой общий обработчик кликов будет перехватывать любые и все события кликов, сделанные для любого элемента внутри элемента, к которому привязан обработчик. (это был хотя бы английский? Надеюсь, что да.)
Чтобы гарантировать, что мы перехватываем клики только по определенным подэлементам, мы можем использовать делегирование событий — то, что jQuery делает для нас очень простым.
Во-первых, немного разметки для создания настроения
Просто чтобы нам было что «визуализировать», вот разметка, на которую будет воздействовать наш jQuery:
Посмотреть код на Gist.
Ничего особенного — просто элемент-контейнер с сеткой постов внутри него и кнопкой, чтобы добавить больше. Кнопка не используется в приведенных здесь примерах, она просто используется для небольшого контекста.
Стандартный обработчик кликов jQuery
Стандартный обработчик кликов может выглядеть следующим образом:
См.
код в Gist.
В приведенном выше коде в document.ready обработчик событий привязан к каждому элементу документа с именем класса .PostsGrid__post . Легкий.
Это прекрасно работает с записями, которые уже существуют в DOM. Однако, если вы пойдете и добавите больше сообщений, приведенный выше код не будет способствовать кликам по этим сообщениям. Введите делегирование…
Делегированный обработчик событий щелчка jQuery
Вот тот же пример, только измененный для использования делегирования событий:
См. код в Gist.
В этом примере обработчик событий привязан к контейнеру сообщений, а jQuery дается указание запускать обработчик только тогда, когда событие щелчка исходит от элемента с именем класса `.PostsGrid__post`.
Использование этого подхода позволит нам добавлять и удалять элементы сообщений из контейнера .PostsGrid__posts , а щелчки по любому и всем элементам сообщения будут запускать наш обработчик событий.