Page 128 - 6108

<input type="button" value="Натисни" id="elem">
elem.onclick = function(event) {
// виводимо тип події, елемент і координати кліку
console.log(event.type + " на " + event.currentTarget);
console.log(event.clientX + ":" + event.clientY);
}

Об’єкт Event являє собою будь-яку подію, яка відбувається в DOM; деякі
з них створюються користувачами (наприклад, події для миші або клавіатури),
а інші створюються API (наприклад, події, які вказують на завершення роботи
анімації, призупинення відео та інше). Існує багато типів подій, деякі з яких
використовують інші інтерфейси на основі основного інтерфейсу події. Сам
об’єкт Event містить властивості та методи, які є загальними для всіх подій.
Повний список типів подій можна знайти за посиланням

https://developer.mozilla.org/en-US/docs/Web/API/Event
Об’єкт Event дозволяє генерувати події за допомогою конструктора.

event = new Event(eventName, eventInit);
eventName – імя події;

Обєкт EventInit, може мати наступні поля:
– bubbles: (необов'язкове) Boolean, що вказує, чи спливає подія. За
умовчанням false.
– cancelable: (необов'язкове) Boolean, що вказує, чи можна відмінити
дію за замовчюванням. За умовчанням false.
– composed: (необов'язкове) Boolean, що вказує, чи буде подія
викликати слухачів за межами тіньового кореня. За умовчанням false.
Такі події часто називають штучним подіями, по відношенню до подій
створених браузером.

<div id="rect" onclick="changeColor(event)">Click me!</div>
function changeColor(event) {
event.currentTarget.style = "background-color: blue;"
}
let event = new Event('click', {'bubbles':true,
'cancelable':true});
rect. dispatchEvent(event);
Для генерації своїх, нестандартних, подій, хоч і можна використовувати
конструктор Event, але існує і специфічний конструктор CustomEvent.

Технічно, він абсолютно ідентичний Event, крім невеликої деталі: у другого
аргументу-об'єкта є додаткова властивість detail, в якому можна вказувати
інформацію для передачі в подію.

let event = new CustomEvent('build', {'bubbles':true,
'cancelable':false, 'detail': elem.dataset.time});
function eventHandler(event) {
console.log('The time is: ' + event.detail);
}