У JavaScript події не тільки викликають обробники, а й можуть бути змінені або зупинені для керування їх розповсюдженням. Два основні механізми взаємодії з подіями – зупинка поширення події та запобігання поведінці за замовчуванням. Це дає змогу контролювати, як події рухаються через DOM, і перешкоджати виконанню небажаних дій браузера.

Припинення розповсюдження події

За замовчуванням події у DOM проходять через три фази: захоплення (capturing), цільова фаза (target) та спливання (bubbling). Однак іноді потрібно зупинити поширення події, щоб вона не піднімалася далі вгору по дереву. Для цього використовуються методи:

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

Приклад: Зупинка спливання подій

https://stackblitz.com/edit/web-platform-mzw7prpv?devToolsHeight=33&file=index.html

Пояснення:

• Натискання на першу кнопку викличе подію click, яка потім "спливе" до батьківського .wrapper, і в консоль виведеться button → Wrapper clicked.
• Натискання на другу кнопку викличе подію click, але через event.stopPropagation() вона не досягне .wrapper, і виведеться лише Propagation prevented.

<aside> ⚠️

Зупиняйте поширення події лише у випадках, коли це дійсно необхідно, оскільки інші функції (наприклад, аналітика Google) можуть залежати від подій

</aside>

Запобігання поведінці за замовчуванням

Браузер має набір стандартних дій для певних подій. Наприклад:

• Перехід за посиланням <a href="...">.
• Надсилання форми після натискання <input type="submit">.
• Контекстне меню при кліку правою кнопкою миші.

Використання event.preventDefault() дозволяє перешкодити виконанню цих стандартних дій, що може бути корисним для кастомної логіки обробки подій.

Приклад: Відміна переходу за посиланням