JavaScriptda paydo bo'lish nima?

Механізм, при якому подія, ініційована на елементі DOM, поширюється "вгору" по ієрархії до його батьківських елементів, аж до кореня (document). За замовчуванням більшість подій проходять через три фази:

1. Фаза захоплення: Подія рухається вниз від кореня до цільового елемента. Слухачі подій, прикріплені з опцією { capture: true }, спрацьовують на цій фазі.
2. Фаза цілі: Подія досягає цільового елемента, на якому вона була ініційована. Слухачі, прикріплені безпосередньо до цього елемента, спрацьовують.
3. Фаза вспливання: Подія рухається вгору від цільового елемента до кореня документа. За замовчуванням, слухачі подій, прикріплені без { capture: true } або з { capture: false }, спрацьовують на цій фазі. Це фаза, в якій відбувається "вспливання" у класичному розумінні.

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

Приклад:

// HTML:
// <div id="parent">
//   <button id="child">Натисни мене</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Подія всплила до батька');
});

child.addEventListener('click', function() {
  console.log('Подія на цільовому елементі (кнопка)');
});

// При натисканні на кнопку 'child' послідовність виводу буде:
// "Подія на цільовому елементі (кнопка)"
// "Подія всплила до батька"

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