Порівняйте методи об’єкта event stopPropagation та stopImmediateProparation.

Повне пояснення

Що це і навіщо

• stopPropagation() – зупиняє bubbling (розповсюдження) події, але інші обробники на тому ж елементі продовжують виконуватись.
• stopImmediatePropagation() – зупиняє bubbling і також перериває виконання всіх наступних обробників на тому ж елементі.

Ключові принципи

• Події в DOM мають три фази: capturing, target і bubbling. Методи працюють лише у фазі target та bubbling.
• stopPropagation() змінює прапорець event.cancelBubble (для старих браузерів) і встановлює event.propagationStopped = true.
• stopImmediatePropagation() додає ще прапорець event.immediatePropagationStopped = true, що блокує виконання подальших listeners.

Як це працює

1. При виклику stopPropagation() браузер продовжує виконувати поточний listener, а далі не передає event‑у в батьківські елементи.
2. При виклику stopImmediatePropagation() браузер не лише зупиняє розповсюдження, а й відразу припиняє виконання всіх наступних listeners на тому ж елементі.

Практика і реалізація (JS/TS)

element.addEventListener('click', (e) => {
  e.stopPropagation(); // зупиняє bubbling
});

element.addEventListener('click', (e) => {
  e.stopImmediatePropagation(); // зупиняє bubbling і наступні listeners
});

Тестування (Jest + jsdom)

import { fireEvent } from '@testing-library/dom';

test('stopPropagation blocks bubbling', () => {
  const parent = document.createElement('div');
  const child = document.createElement('button');
  parent.appendChild(child);

  const spyParent = jest.fn();
  const spyChild = jest.fn((e) => e.stopPropagation());

  parent.addEventListener('click', spyParent);
  child.addEventListener('click', spyChild);

  fireEvent.click(child);
  expect(spyParent).not.toHaveBeenCalled();
});

Особливості в контексті React

• У React synthetic events обгортають native event, але методи stopPropagation і stopImmediatePropagation працюють так само.
• Якщо потрібно зупинити подальші handlers у React, використовуйте e.nativeEvent.stopImmediatePropagation().

Оптимізація та edge‑cases

• Використання stopImmediatePropagation може вплинути на продуктивність, якщо у елементі багато listeners.
• У багатопоточних сценаріях (Web Workers) ці методи не застосовуються.

Часті помилки

1. Заміна stopPropagation на preventDefault – це інша функція, яка лише зупиняє дефолтну поведінку.
2. Виклик stopPropagation у listener, який вже був зупинений попереднім listener‑ом.
3. Не врахування, що stopImmediatePropagation не зупиняє bubbling у фазі capturing.

Cheatsheet

• stopPropagation() – зупиняє bubbling, залишає інші listeners.
• stopImmediatePropagation() – зупиняє bubbling + наступні listeners на тому ж елементі.
• Для React: e.nativeEvent.stopImmediatePropagation() для повної блокади.