Объект пользовательского события CustomEvent

CustomEvent даёт возможность создавать пользовательские события с произвольным именем и дополнительной информацией. Их можно запускать вручную и отслеживать через стандартные механизмы событий.

        
          
          const myCustomEvent = new CustomEvent('mycustomevent', {  detail: {    key: 'value'  }})
          const myCustomEvent = new CustomEvent('mycustomevent', {
  detail: {
    key: 'value'
  }
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Чтобы создать своё событие, нужно вызвать new CustomEvent(). Конструктор принимает в себя два аргумента:

• type — строка с названием события;
• options (необязательный) — объект со свойствами события:
  • detail — данные любого типа, которые необходимо передать вместе с событием, но можно ничего и не передавать;
  • bubbles — всплывает ли событие, по умолчанию false;
  • cancelable — можно ли отменить событие, по умолчанию false;
  • composed — должно ли событие переходить из теневого DOM в обычный, по умолчанию false.

CustomEvent создаёт пользовательское (кастомное) событие. Оно даёт разработчику возможность самостоятельно определить, когда событие происходит, как называется и какие данные с ним передаются. Пригодится, когда стандартных DOM-событий (например, click или input) недостаточно для описания происходящего на странице.

CustomEvent похож на обычный Event. Основное отличие — CustomEvent позволяет передать дополнительные данные, а Event нет.

Отправить пользовательское событие можно с помощью dispatchEvent().

💡 Кастомные события пригодятся, когда нужно сообщить другим частям приложения о каком-либо действии или изменении. Использование CustomEvent позволяет избавиться от прямых зависимостей между модулями и сделать их менее связными.

        
          
          // Модуль Аconst userLoginEvent = new CustomEvent('userlogin', {  detail: {    username: authData.username  }})document.dispatchEvent(userLoginEvent)// Модуль Бconst username = document.getElementById('username')document.addEventListener('userlogin', (event) => {  username.textContent = event.detail.username})
          // Модуль А
const userLoginEvent = new CustomEvent('userlogin', {
  detail: {
    username: authData.username
  }
})

document.dispatchEvent(userLoginEvent)

// Модуль Б
const username = document.getElementById('username')

document.addEventListener('userlogin', (event) => {
  username.textContent = event.detail.username
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 В качестве type в конструктор кастомного события можно передать название стандартного события, например, click. Когда событие инициируется, оно попадёт в обработчик события и будет обработано, однако, не приведёт к изменению состояния элемента, как это сделало бы обычное событие.

Попробуйте изменить в демке состояние чекбокса, кликнув на него и на обе кнопки: