8.1 Створення кастомних подій
Кастомні події (або користувацькі події) у JavaScript дозволяють розробникам створювати і диспатчити власні події, що може бути корисно для передачі інформації та взаємодії між різними частинами застосунку. Створення і використання кастомних подій може покращити структуру і гнучкість твого коду, надаючи спосіб повідомлення і керування станом застосунку.
Для створення кастомних подій використовується конструктор CustomEvent. Цей конструктор дозволяє створювати нові події з налаштовуваними параметрами і додатковими даними.
Синтаксис:
const event = new CustomEvent(type, {detail: additionalData});
Де:
type: рядок, що представляє ім'я подіїdetail: об'єкт, який містить додаткові дані, що будуть передані разом із подією
Приклад створення кастомної події:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Привіт, світ!' } });
8.2 Диспатчинг кастомних подій
Диспатчинг події здійснюється за допомогою методу dispatchEvent. Цей метод викликається на елементі, на якому має відбутися подія.
Пояснення:
- Додається обробник події
myCustomEventдо кнопкиmyButton, який виводить в консоль повідомлення з даних події - Створюється кастомна подія
myCustomEventз повідомленням уdetail - Подія диспатчиться на кнопку
myButton, викликаючи обробник і виводячи повідомлення в консоль
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Кнопка</button>
<script>
const button = document.getElementById('myButton');
// Додавання обробника для кастомної події
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// Створення і диспатчинг кастомної події
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Привіт, світ!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Застосування кастомних подій
Кастомні події корисні для створення більш модульного і підтримуваного коду, особливо при роботі з компонентами і складними застосунками. Вони дозволяють одному компоненту повідомляти інші компоненти про зміни або дії, що відбулися.
Пояснення:
- Модуль A диспатчить кастомну подію
notifyBна елементіmoduleB, передаючи дані - Модуль B слухає подію
notifyBі обробляє її, виводячи повідомлення в консоль
Приклад використання кастомних подій у модульному застосунку:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Модуль A</div>
<div id="moduleB">Модуль B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Модуль A диспатчить кастомну подію
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Дані з Модуля A' } });
moduleB.dispatchEvent(event);
}
// Модуль B слухає кастомну подію
moduleB.addEventListener('notifyB', function(event) {
console.log('Модуль B отримав:', event.detail.message);
});
// Симуляція дії в Модулі A
notifyModuleB();
</script>
</body>
</html>
8.4 Параметри кастомних подій
Кастомні події можуть бути додатково налаштовані за допомогою наступних параметрів:
bubbles: логічне значення, яке вказує, чи має подія спливати. За замовчуваннямfalsecancelable: логічне значення, яке вказує, чи може подія бути скасована. За замовчуваннямfalsecomposed: логічне значення, яке вказує, чи має подія поширюватися за межі тіньових DOM-дерев. За замовчуваннямfalse
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Кнопка</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Додавання обробників для контейнера і кнопки
container.addEventListener('customEvent', function(event) {
console.log('Container отримав:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button отримав:', event.detail.message);
});
// Створення і диспатчинг кастомної події з параметрами
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Привіт від кнопки' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ