8.1 Создание кастомных событий
Кастомные события (или пользовательские события) в JavaScript позволяют разработчикам создавать и диспатчить собственные события, что может быть полезно для передачи информации и взаимодействия между различными частями приложения. Создание и использование кастомных событий может улучшить структуру и гибкость вашего кода, предоставляя способ оповещения и управления состоянием приложения.
Для создания кастомных событий используется конструктор CustomEvent. Этот конструктор позволяет создавать новые события с настраиваемыми параметрами и дополнительными данными.
Синтаксис:
const event = new CustomEvent(type, {detail: additionalData});
Где:
type: строка, представляющая имя событияdetail: объект, содержащий дополнительные данные, которые будут переданы вместе с событием
Пример создания кастомного события:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
8.2 Диспатчинг кастомных событий
Диспатчинг события осуществляется с помощью метода dispatchEvent. Этот метод вызывается на элементе, на котором должно произойти событие.
Объяснение:
- Добавляется обработчик события
myCustomEventк кнопкеmyButton, который выводит в консоль сообщение из данных события - Создается кастомное событие
myCustomEventс сообщением вdetail - Событие диспатчится на кнопку
myButton, вызывая обработчик и выводя сообщение в консоль
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</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: 'Hello, world!' } });
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">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Модуль A диспатчит кастомное событие
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
moduleB.dispatchEvent(event);
}
// Модуль B слушает кастомное событие
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', 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</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Добавление обработчиков для контейнера и кнопки
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// Создание и диспатчинг кастомного события с параметрами
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hello from button' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ