JS властивість Event.bubbles
Загальний опис
bubbles — це властивість об'єкта події в JavaScript, яка повертає логічне значення (true або false). Вона визначає, чи може подія спливати (підніматися) по ланцюжку DOM-елементів. Якщо значення true, подія буде "спливати" від поточного елемента до його батьківських елементів, поки не досягне кореня документу або не буде зупинена. Якщо false, подія не спливатиме, а буде оброблена тільки на поточному елементі.
Події, такі як click, за замовчуванням підтримують спливання, тому їх властивість bubbles дорівнює true. Інші події, наприклад focus або blur, не підтримують спливання, тому їх властивість bubbles дорівнює false. Це важлива особливість, оскільки вона дозволяє програмісту контролювати, як і де події повинні оброблятися.
Спливання подій є частиною механізму обробки подій в DOM і дозволяє ловити події не тільки на елементі, який їх генерує, а й на будь-якому з батьківських елементів. Наприклад:
document.body.addEventListener('click', (event) => {
if (event.bubbles) {
console.log('Подія спливає: ' + event.type);
}
});
У цьому прикладі, якщо користувач клацає на будь-якому елементі сторінки, подія буде спливати до тіла документа, і консоль виведе тип події, оскільки вона підтримує спливання.
Зупинити спливання події можна за допомогою методу stopPropagation(). Наприклад, якщо не бажаєте, щоб подія продовжувала підніматися, ви можете це зупинити:
element.addEventListener('click', (event) => {
event.stopPropagation();
});
Це допомагає уникнути небажаних обробок на батьківських елементах, коли подія повинна бути оброблена тільки на певному елементі.
| Порада: | Коли ви працюєте з багаторівневою структурою DOM, важливо враховувати, що зупинка спливання на одному елементі впливає на всю ієрархію. Якщо подія не повинна доходити до вищих рівнів, використовуйте |
| Порада: | Використовуйте |
| Порада: | Пам'ятайте, що якщо ви створюєте власні події через |
Синтаксис
event.bubblesЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
У цьому прикладі є два елементи-кнопки. Кнопка "Натисни мене (спливання)" дозволяє події спливати до батьківського елемента, і подія обробляється як на кнопці, так і на контейнері. Інша кнопка "Натисни мене (без спливання)" зупиняє спливання події, і вона обробляється лише на самій кнопці, без впливу на контейнер. Користувач може побачити, як властивість bubbles впливає на обробку подій у DOM.
У цьому прикладі створюється кастомна подія з використанням CustomEvent, яка спливає від дочірнього елемента до тіла документа. Завдяки властивості bubbles: true, подія може бути відловлена на будь-якому рівні DOM, надаючи можливість ділитися даними між різними частинами сторінки.
let customEvent = new CustomEvent('customEvent', {
bubbles: true,
detail: { message: 'Привіт від CustomEvent!' }
});
document.querySelector('.child').dispatchEvent(customEvent);
document.body.addEventListener('customEvent', (event) => {
console.log(event.detail.message); // "Привіт від CustomEvent!"
});У цьому прикладі подія click відслідковується на батьківському елементі .parent, але якщо цільовий елемент має клас no-bubble, спливання події буде зупинено. Це дозволяє обробляти події тільки на певних елементах, не даючи їм впливати на інші рівні DOM.
document.querySelector('.parent').addEventListener('click', (event) => {
if (event.target.classList.contains('no-bubble')) {
event.stopPropagation();
console.log('Спливання зупинено для елемента:', event.target);
}
});