jQuery Academy · Урок

Создание и вызов пользовательских событий

«Создание и вызов пользовательских событий» — бесплатный урок jQuery Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Введение в пользовательские события

Добро пожаловать! На этом уроке Вы научитесь создавать собственные пользовательские события и управлять ими в jQuery. Это мощный способ сделать код более организованным и гибким.

Представьте пользовательские события как специальные сообщения, которые разные части веб-приложения могут отправлять и получать. Это помогает им взаимодействовать без прямой связи друг с другом.

Зачем нужны пользовательские события?

Зачем использовать пользовательские события? Они помогают решить распространённую проблему: тесную связанность. Когда компоненты тесно связаны, изменение одной части кода может нарушить работу другой.

Ослабление связанности: компонентам не нужно знать о внутреннем устройстве друг друга.
Более чистый код: логика, относящаяся к определённому действию, сосредоточена в одном месте.
Гибкость: можно легко добавлять или удалять обработчики, не изменяя «отправителя».

Метод .trigger()

Чтобы «отправить» или «вызвать» пользовательское событие, используется метод .trigger() jQuery. Вызовите его для объекта jQuery — элемента или document — и передайте имя события в виде строки.

Имя события может быть любым, например 'dataLoaded' или 'itemAdded'.

Демонстрация вызова события

Посмотрим, как работает .trigger(). При щелчке по кнопке мы вызовем пользовательское событие с именем 'myCustomEvent'. Пока ничего не произойдёт, потому что его никто не прослушивает!

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

Прослушивание с помощью .on()

Чтобы «получить» или «прослушивать» пользовательское событие, используется знакомый метод .on(). Как и для встроенных событий, например 'click', укажите имя события и функцию, которая будет выполняться при его вызове.

Можно прослушивать событие на том же элементе, который его вызвал, на родительском элементе или даже на самом document для глобальных событий.

Пример вызова и прослушивания

Теперь объединим .trigger() и .on(). Щёлкните кнопку — появится сообщение, показывающее, что наше пользовательское событие было вызвано и обработано!

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

Передача данных с событиями

Пользовательские события ещё полезнее, если вместе с ними можно передавать данные. После имени события в .trigger() можно передать дополнительные аргументы. Эти аргументы будут переданы функции — обработчику события.

Первым аргументом обработчика всегда является объект события.
Следующие аргументы — это данные, переданные Вами с помощью .trigger().

Демонстрация данных пользовательского события

Здесь мы вызываем событие 'dataReady' и передаём строку и объект. Обработчик получает эти данные и отображает их. Так компоненты обмениваются информацией!

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

Ослабление связанности для улучшения приложений

Использование пользовательских событий для взаимодействия помогает создавать более модульные приложения, которые проще поддерживать. Представьте компонент «корзина покупок» и компонент «отображение товара».

Когда товар добавляется, компонент «отображение товара» вызывает 'productAdded'.
Компонент «корзина покупок» прослушивает 'productAdded' и обновляет себя.

Ни одному из компонентов не нужно знать о внутренних методах другого — только о соглашении взаимодействия через событие.

Проверьте своё понимание

Какие из следующих утверждений верно описывают преимущества или использование пользовательских событий с .trigger() и .on()?

Повторение: пользовательские события

Отличная работа! Вы научились создавать пользовательские события и управлять ими в jQuery. Кратко подведём итоги:

Что: пользовательские события — это сообщения, определяемые пользователем для компонентов приложения.
Зачем: они способствуют ослаблению связанности, что ведёт к более чистому и гибкому коду.
Как: используйте .trigger('eventName', [data]), чтобы вызвать событие.
Как: используйте .on('eventName', function(event, data) { ... }), чтобы прослушивать событие.

Освоение пользовательских событий — важный шаг к созданию надёжных и масштабируемых приложений на jQuery!

Часто задаваемые вопросы

Урок «Создание и вызов пользовательских событий» бесплатный?

Да — полный текст урока «Создание и вызов пользовательских событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Создание и вызов пользовательских событий»?

Проектируйте и реализуйте пользовательские события с помощью .trigger() и .on(), чтобы разделять компоненты, создавать более чистый код и обеспечивать гибкое взаимодействие между частями приложения. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Создание и вызов пользовательских событий»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Надёжное делегирование событий
Остановка распространения событий
Создание и вызов пользовательских событий

← Назад к jQuery Academy