JavaScript Academy · Урок

Пользовательские события

Создавайте и отправляйте собственные события.

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

За пределами встроенных событий

DOM позволяет создавать и вызывать собственные события с помощью CustomEvent. Это ослабляет связанность частей приложения: один компонент сообщает о произошедшем, а другие слушают его без прямой ссылки.

Создание CustomEvent

Создайте его с помощью new CustomEvent(name, options). Имя может быть любой выбранной Вами строкой.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Вызов события

Вызовите событие на целевом элементе с помощью dispatchEvent. Запускается любой обработчик, зарегистрированный для этого имени на целевом элементе или на одном из его предков, если событие всплывает.

element.dispatchEvent(new CustomEvent("cart:add"));

Ожидание события

Слушайте его точно так же, как встроенное событие, используя addEventListener со своим именем.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Передача данных через detail

Прикрепите данные через свойство detail. Обработчики считывают их из event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Чтение данных события

Внутри обработчика event.detail содержит всё, что Вы передали. Это может быть любое значение: объект, массив, строка или число.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Включение всплытия

По умолчанию пользовательские события НЕ всплывают. Установите bubbles: true, чтобы предки и обработчики с делегированием могли их получать.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

Параметр cancelable

Установите cancelable: true, чтобы обработчики могли вызвать preventDefault(). Код, вызывающий событие, проверяет возвращаемое значение dispatchEvent, чтобы узнать, было ли оно отменено.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Шаблон ослабления связанности

Пользовательские события позволяют модулям взаимодействовать без импорта друг друга. Слой журналирования или аналитики может слушать document и получать события всего приложения.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Соглашения об именовании

Используйте пространства имён в названиях событий (например, cart:add, user:login), чтобы избежать конфликтов со встроенными событиями и чётко группировать связанные события.

Старый и новый синтаксис

В старом коде Вам может встретиться устаревший API document.createEvent. Предпочитайте современный конструктор new CustomEvent(...): он проще, и именно эту форму следует использовать сегодня.

const evt = new CustomEvent("ready", { detail: 1 });

Быстрая проверка

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

Итоги

Используйте new CustomEvent(name, { detail, bubbles, cancelable }) и dispatchEvent, чтобы создавать собственные события. Считывайте данные через event.detail, включайте всплытие для делегирования и используйте cancelable для действий, которые можно отменить. Пользовательские события ослабляют связанность компонентов и создают понятную модель публикации и подписки.

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

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

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

Чему я научусь в уроке «Пользовательские события»?

Создавайте и отправляйте собственные события. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Пользовательские события»?

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

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

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

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

← Назад к JavaScript Academy