кастомними події JavaScript

      Переклад статті «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 працює в більшості сучасних браузерів.
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.