.dispatchEvent()

Метод dispatchEvent используется для программного запуска события, чтобы другие части приложения могли отреагировать на него через обработчики.

        
          
          const event = new Event('click')element.dispatchEvent(event)
          const event = new Event('click')

element.dispatchEvent(event)

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

element.dispatchEvent() принимает в качестве параметра такие события:

• обычное, созданное через Event;
• пользовательское, созданное через CustomEvent.

element используется для инициализации event.target и определяет, какие обработчики события вызвать.

Метод возвращает false, если событие может быть отменено и один из обработчиков вызвал event.preventDefault(), либо true — в остальных случаях.

Метод dispatchEvent используется для инициирования события вручную, без участия пользователя. Он принимает объект события, созданный заранее, и передаёт его на обработку системе событий. Затем вызываются обработчики, «слушающие» это событие.

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

        
          
          const toogleMenuEvent = new CustomEvent('tooglemenuevent', {  detail: {    isOpen: true  }})document.dispatchEvent(toogleMenuEvent)
          const toogleMenuEvent = new CustomEvent('tooglemenuevent', {
  detail: {
    isOpen: true
  }
})

document.dispatchEvent(toogleMenuEvent)

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

Или для имитации пользовательских действий при тестировании.

        
          
          const event = new Event('click')element.dispatchEvent(event)
          const event = new Event('click')

element.dispatchEvent(event)

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

💡 Отличить событие, созданное через dispatchEvent, от остальных можно с помощью свойства event.isTrusted. Оно будет равно true для событий, инициированных браузером, действиями пользователя или вызовами программных методов, например element.focus(), и false для событий, вызванных через dispatchEvent.

        
          
          if (event.isTrusted) {  console.log('Это событие вызвано браузером.')} else {  console.log('Это событие вызвано через dispatchEvent.')}
          if (event.isTrusted) {
  console.log('Это событие вызвано браузером.')
} else {
  console.log('Это событие вызвано через dispatchEvent.')
}

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