Перевод статьи «CustomEvent», David Walsh
С самого появления JavaScript, события были шлюзом ко взаимодействию пользователя в браузере. События сообщают нам не только о том, что происходит взаимодействие, но также вид взаимодействия, задействованные элементы и предоставляют методы для работы с событием. Создание и инициирование(triggering) кастомных событий всегда являлось более сложной задачей. С использованием JavaScript CustomEvent API, эта сложность может быть устранена. CustomEvent API позволяет разработчикам не только создавать кастомные события, но также инициировать их на элементах DOM, передавая данные по цепочке. Самое главное, что API максимально прост!
JavaScript
В кастомном событии есть только два компонента: имя и возможность его инициировать. Добавление обработчика события к элементу, тем временем, остается прежним:
myElement.addEventListener("userLogin", function(e) {
console.info("Event is: ", e);
console.info("Custom data is: ", e.detail);
})
В коде выше мы добавили событие userLogin, так же просто, как могли бы добавить встроенное событие mouseover или focus — здесь все остается по прежнему. Что отличается, так это создание и инициирование события:
// First create the event
var myEvent = new CustomEvent("userLogin", {
detail: {
username: "davidwalsh"
}
});
// Trigger it!
myElement.dispatchEvent(myEvent);
Конструктор класса CustomEvent позволяет, при создании, передавать название события, а также ваши дополнительные свойства; метод dispatchEvent инициирует событие на переданном элементе. Давайте сделаем это событие супер-кастомизируемым, добавив возможность отмены его распространения(bubbling):
var myEvent = new CustomEvent("userLogin", {
detail: {
username: "davidwalsh"
},
bubbles: true,
cancelable: false
});
Создание и инициация кастомных событий с передачей кастомных данных, это невероятно полезная вещь. Вы можете не только придумать свое соглашение о наименовании событий, но также можете передавать необходимые данные в обработчики! Посмотреть поддержку CustomEvent API можно на MDN, но, всё равно, этот API работает в большинстве современных браузеров.
Автор: jojo97
