JS властивість Event.show
Загальний опис
Подія show спрацьовує, коли елемент <dialog> стає видимим для користувача. Ця подія відбувається після виклику методів show() або showModal(), які використовуються для відображення діалогових вікон на веб-сторінці. Подія корисна, якщо потрібно виконати певні дії одразу після відкриття діалогового вікна, наприклад, завантаження динамічних даних, активація інтерактивних елементів або зміна стану інтерфейсу користувача.
Елемент <dialog> спочатку був представлений як частина HTML5 і дозволяє створювати вбудовані діалогові вікна з можливістю виклику методом showModal() для модальних вікон (які блокують взаємодію з іншими елементами) або методом show() для звичайних вікон. Коли діалогове вікно стає видимим, автоматично спрацьовує подія show, яка дозволяє розробникам реагувати на цей момент.
Приклад:
const dialog = document.querySelector('dialog');
dialog.addEventListener('show', function() {
console.log('Діалогове вікно відкрито');
});
dialog.showModal();
У цьому прикладі, коли метод showModal() викликається для відображення діалогового вікна, подія show спрацьовує і виводить повідомлення в консоль. Це дозволяє розробникам додавати будь-які додаткові дії або анімації після відкриття вікна.
Подія show спрацьовує кожного разу, коли вікно стає видимим, незалежно від того, чи використовується show() або showModal(). Розробники можуть використовувати цю подію для контролю стану додатку або зміни візуальних елементів інтерфейсу залежно від того, коли вікно стає активним. Це корисно у випадках, коли потрібно, щоб діалогове вікно було інтерактивним і відображало динамічний контент або користувацькі дані, що змінюються.
| Порада: | Подія |
| Порада: | Для перевірки, чи вікно вже відкрите, використовуйте властивість |
| Порада: | Використовуйте метод |
Синтаксис
element.addEventListener('show', function(event) {
// код обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач натискає на кнопку для відкриття діалогового вікна. Після того, як вікно стає видимим (подія show), у вікно завантажується динамічний контент, і оновлюється повідомлення з поточним часом відкриття діалогу. Це корисний приклад інтерактивного використання події show, коли важливо виконати певні дії після відкриття діалогового вікна.
У цьому прикладі подія show відслідковує відкриття кількох діалогових вікон і виводить ідентифікатор кожного вікна в консоль. Це зручно для додатків із великою кількістю діалогових вікон, де потрібно точно знати, яке з них було відкрито.
const dialogs = document.querySelectorAll('dialog');
dialogs.forEach(dialog => {
dialog.addEventListener('show', function() {
console.log(`Діалогове вікно ${dialog.id} відкрито`);
});
});
// Відкриваємо декілька вікон
dialogs[0].showModal();
dialogs[1].show();У цьому прикладі під час відкриття діалогового вікна через подію show здійснюється запит на сервер для завантаження динамічного контенту. Це корисно для додатків, які завантажують дані лише в момент відкриття діалогу, економлячи ресурси.
const dialog = document.querySelector('dialog');
const contentArea = document.querySelector('#dialogContent');
dialog.addEventListener('show', function() {
// Динамічно завантажуємо контент у діалогове вікно
fetch('/api/getDialogContent')
.then(response => response.text())
.then(data => {
contentArea.innerHTML = data;
});
});
dialog.showModal();