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();
});

Це допомагає уникнути небажаних обробок на батьківських елементах, коли подія повинна бути оброблена тільки на певному елементі.

правити

Порада

Пам'ятайте, що якщо ви створюєте власні події через CustomEvent, ви можете контролювати, чи буде подія спливати, встановлюючи значення bubbles в параметрах події. Це дозволяє створювати події з потрібною поведінкою для конкретних ситуацій.

автор: Bond правити

Порада

Коли ви працюєте з багаторівневою структурою DOM, важливо враховувати, що зупинка спливання на одному елементі впливає на всю ієрархію. Якщо подія не повинна доходити до вищих рівнів, використовуйте stopPropagation(), але будьте обережні, щоб це не порушило інші обробники.

автор: Bond правити

Порада

Використовуйте bubbles у поєднанні з делегуванням подій. Якщо у вас є список елементів, де кожен елемент повинен реагувати на подію, краще призначати один обробник на батьківський елемент і перевіряти подію через спливання:

document.querySelector('.parent').addEventListener('click', (event) => {
  if (event.bubbles && event.target.matches('.child')) {
    // Обробляємо подію на дитячому елементі
  }
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.bubbles

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="parent">перший елемент parent</div>
<div class="parent">другий елемент parent</div>

document.querySelector('.parent').addEventListener('click', (event) => {
  if (event.target.classList.contains('no-bubble')) {
    event.stopPropagation();
    console.log('Спливання зупинено для елемента:', event.target);
  }
});

<div class="child">перший елемент child</div>
<div class="child">другий елемент child</div>

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!"
});