JavaScript: понимание CustomEvent и dispatchEvent

В этой статье я попытаюсь объяснить, как мы можем создавать и отправлять события, используя конструкторы Event, методы и конструкторы. Мы также рассмотрим, как и для каких целей в наших проектах используются пользовательские события и dispatchEvent.CustomEventdispatchEvent()

Я надеюсь, что к концу этой статьи вы сможете создавать собственные события.

Итак, приступим!

Веб-приложение состоит из серии событий, и можно сказать, что эти события являются одной из наиболее важных частей веб-приложения.

В некоторых случаях события JavaScript по умолчанию не соответствуют нашим требованиям. Например, в наших приложениях мы используем некоторые настраиваемые события, недоступные в событиях JavaScript по умолчанию, для добавления уведомлений, обновления некоторых данных и т. д. Мы рассмотрим их в оставшейся части статьи.

Как мы можем создавать пользовательские события?

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

• Первый способ — использование конструктора событий .
• Второй способ — использование конструктора CustomEvent , который мы предпочитаем.

Конструктор событий

Вы можете создавать собственные события с помощью конструктора событий следующим образом:

Обратите внимание, что имена событий нечувствительны к регистру. Так NOTIFICATION_ADD же , как Notification_Add или notification_add .

const event = new Event('NOTIFICATION_ADD');

Как мы упоминали выше, если мы хотим добавить больше данных в объект события, мы можем использовать конструктор CustomEvent следующим образом:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

Итак, событие создано. Что дальше? Конечно, мы хотим использовать его в нашем проекте. Последним шагом запуска события является вызов метода dispatchEvent(). Он принимает параметр события , внутри которого находится объект Event.

Позвольте мне показать вам пример.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

Для каких целей и где мы его используем?

Прежде чем читать, вы можете просмотреть эти статьи о микрофронтенде.

В CicekSepeti у нас есть архитектура микроинтерфейса и пользовательские компоненты, такие как кнопка, всплывающая подсказка, уведомление, флажок и т. д., а также несколько фрагментов. Иногда требуется связь между этими компонентами и фрагментами. Как раз в этот момент нам помогают пользовательские события.

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

В этом случае компонент уведомления имеет прослушиватель событий с именем «NOTIFICATION_ADD», а на странице есть регистрационная форма. Когда пользователь нажимает кнопку регистрации, мы делаем запрос API, а затем отображаем всплывающее сообщение об успехе или ошибке с помощью метода dispatchEvent и пользовательского конструктора событий.

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

Резюме

Использование пользовательских событий JavaScript может улучшить как работу пользователя, так и процесс разработки вашего приложения при правильном использовании . Теперь мы знаем, что можем использовать настраиваемые события, когда события JavaScript по умолчанию, такие как события клавиатуры, события мыши и т. д., не соответствуют нашим требованиям.

использованная литература