В JavaScript события — это действия или события, происходящие в системе, которую вы программируете, о которых система сообщает вам, чтобы ваш код мог реагировать на них. Например, если пользователь нажимает кнопку, вы можете отреагировать на это действие, отобразив окно предупреждения.

Эти настраиваемые события можно создавать с помощью конструктора событий или интерфейса CustomEvent.

Конструктор Event создает событие, а CustomEvent создает событие с большей функциональностью.

Есть два способа создания пользовательских событий в JavaScript:

  1. Использование конструктора событий
  2. Использование интерфейса CustomEvent

Конструктор Event создает событие, а CustomEvent создает событие с большей функциональностью.

1. Использование конструктора событий

Чтобы создать базовое событие с помощью конструктора событий, нам потребуются следующие шаги;

· Мы создаем событие с помощью конструктора событий.

· Слушаем это событие методом addEventListener().

· Мы инициируем или отправляем событие, используя метод element.dispatchEvent(eventName).

//Assign an event
const customEvent1 = new Event("shout");
const customEvnt1Btn = document.getElementById('customEvent1Btn');

//Trigger the event listener
customEvnt1Btn.addEventListener("shout", () => {
    console.log("Let's get loud!")
});

//Dispatch the event
customEvnt1Btn.addEventListener("click", () => {
    customEvnt1Btn.dispatchEvent(customEvent1);
});

2. Использование интерфейса CustomEvent

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

Чтобы создать базовое событие с использованием интерфейса CustomEvent, нам потребуются следующие шаги;

· Мы создаем пользовательское событие с помощью конструктора CustomEvent.

· Укажите два аргумента, первый — это имя события, а второй — объект, содержащий данные. Имя свойства внутри имени объекта должно называться detail, иначе оно не будет работать.

· Затем мы создаем прослушиватель для этого события.

· Инициировать или отправить событие.

const customEvnt2Btn = document.getElementById('customEvent2Btn');

//Create a custom event
const myCustomEvent = new CustomEvent('vinn', {
    detail: {
        title: "Vinn's event"
    }
});

//Add an appropriate event listener
customEvnt2Btn.addEventListener('vinn', (e) => {
    console.log(e.detail.title);
});

//Dispatch the event
customEvnt2Btn.addEventListener('click', () => {
    customEvnt2Btn.dispatchEvent(myCustomEvent);
});

Удаление слушателей

Если вы добавили обработчик событий с помощью addEventListener(), вы можете снова удалить его с помощью метода removeEventListener(). Например, это удалит дескриптор события changeBackground().

customEvnt2Btn.removeEventListener('vinn', changeBackground)

Сводка

Теперь вы должны знать о создании веб-событий в JavaScript на данном этапе. События на самом деле не являются частью ядра JavaScript, поскольку они определены в веб-API браузера.

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