Попробую на пальцах объяснить.
Событие – это конверт, на котором написано его название. Внутрь конверта можете вложить что-нибудь, а можете оставить конверт пустым.
Элемент – это столик. Кто угодно может подойти и положить на столик свой конверт.
Слушатель – это мужик, который топчется около столика и смотрит, нет ли чего с интересующим его названием. Может несколько человек поджидать конвертики с определённым названием – прочтут все, если только в конверте не написано «по прочтении съесть» – тогда кто-то съест и дальше не передаст.
Как создать/отправить конверт. В любом месте кода создайте конверт и дайте ему название:
var myEvent = new Event('teaTime'); Остается положить конверт на нужный столик:
document.getElementById('stolik').dispatchEvent(myEvent);
Чтобы в событие вложить какие-то данные, нужно использовать другой конструктор и передать нагрузку в поле
detail:
var event = new CustomEvent('saySomething', { detail: "Hello there!" });
Для чего нужно создавать свои события? Чтобы развязать куски кода. Например, в разных местах документа можно нажать на кнопку повторяющегося виджета. Виджет создаст на
document событие "widgetClicked". А ещё несколько одинаковых компонентов в странице, слушающих
document на предмет события "widgetClicked", получат пинок и что-нибудь вытворят.
