В JavaScript события — это действия или события, происходящие в системе, которую вы программируете, о которых система сообщает вам, чтобы ваш код мог реагировать на них. Например, если пользователь нажимает кнопку, вы можете отреагировать на это действие, отобразив окно предупреждения.
Эти настраиваемые события можно создавать с помощью конструктора событий или интерфейса CustomEvent.
Конструктор Event создает событие, а CustomEvent создает событие с большей функциональностью.
Есть два способа создания пользовательских событий в JavaScript:
- Использование конструктора событий
- Использование интерфейса 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, имеют разные модели событий.