Разница между генерацией событий в JavaScript через конструкторы и методом dispatchEvent заключается в том, что каждый из этих подходов выполняет разные задачи:
Конструкторы позволяют создавать объекты событий, указывая тип и некоторые настройки. 24 Например, базовый конструктор Event принимает обязательное имя события и объект с двумя свойствами: bubbles (для всплывания события) и cancelable (если нужно, чтобы работал метод event.preventDefault()). 1 Особые конструкторы встроенных событий (MouseEvent, KeyboardEvent и другие) принимают специфичные для каждого конкретного типа событий свойства. 1 Для пользовательских событий используется конструктор CustomEvent, у которого есть дополнительная опция detail для передачи информации в объекте события. 1
Метод dispatchEvent позволяет отправить искусственно созданное событие элементу, синхронно вызывая затронутые прослушиватели событий в соответствующем порядке. 2 В отличие от нативных событий, которые запускаются DOM и вызывают обработчики событий асинхронно через цикл обработки событий, dispatchEvent вызывает обработчики событий синхронно. 2