Я уверен, что если вы пришли читать эту статью, вы уже слышали или использовали некоторые из основных событий, определенных в элементах HTML, таких как: onchange, onclick, onmouseover, onkeydown, onload и т. д.

Эти события являются основными событиями, определенными в HTML, они предоставляют базовые функции, такие как onchange fires, когда они являются изменением ввода, текстовой области или элемента выбора HTML, но что вы будете делать, если хотите получать уведомления (скрыть/показать/обновить) некоторые части ваша страница, когда пользователь набирает «почему так серьезно!» в текстовом поле или, скажем, вы хотите обновить несколько элементов на странице HTML. В таких случаях могут пригодиться пользовательские события Javascript.

Но лучший вариант использования событий, который я лично вижу, заключается в том, что с помощью событий мы можем создавать модульные приложения (мобильные/веб-сайты), чтобы мы могли в любое время вносить изменения в наши приложения, не слишком беспокоясь о поломке кода.

Создание пользовательских событий javascript очень просто, просто используйте интерфейс CustomEvent, предоставляемый javascript, и укажите имя события (используется позже для прослушивания, поэтому оно должно быть уникальным для вашего приложения) и сведения, которые вы хотите передать слушателям этого события.

var myEvent = new CustomEvent("customEventName", {

detail: { data1: "any value", name: "any value you want to give", randomNumber: Math.round(Math.random() * 200)},

bubbles: true,
cancelable: true});

Вы можете включить любые допустимые типы данных в детальный объект. Если для пузырьков установлено значение true, события будут всплывать к предкам элемента, вызвавшего событие, или сказать, что предок элемента, вызвавшего событие, может прослушивать это событие, значение по умолчанию для пузырьков равно true. События запускаются только элементами HTML DOM, простой синтаксис: element.dispatchEvent("yourEventName")

Посмотреть все методы и свойства интерфейса CustomEvent.

document.body.dispatchEvent(myEvent);

В этом случае мы отправляем событие элементу document.body. Вы вызываете dispatchEvent для элемента, который вы хотите использовать в качестве цели события (он же элемент, который фактически запускает событие), например, если вы хотите отправить событие для элемента с идентификатором «msgbox», вы напишете: document.getElementById("msgbox").dispatchEvent(myEvent);

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

(1) Вы должны поместить код прослушивателя событий перед кодом отправки события.

(2) Вы не можете прикрепить прослушиватель событий к преемнику/дочернему элементу, который отправляет это событие. Посмотрите демонстрацию plunker для лучшего понимания.

(3) Поскольку пользовательские события расширяют объект Event, поэтому все свойства событий могут использоваться ими. Преимущество пользовательских событий заключается в том, что мы можем указать свои собственные свойства или переопределить поведение событий по умолчанию.

document.body.addEventListener("customEventName", eventHandler, false);

function обработчик событий(e) { alert("Event detail is: " + e.detail); }

Демо