Чӣ гуна пайдоиши дар JavaScript аст?

DOM элементында башланган вакыйга, аның "югары" йерархия буенча, аның әти-әни элементларына, хәтта тамыр (document) кадәр таралу механизмы. Стандарт рәвештә, күпчелек вакыйгалар өч этаптан үтә:

1. Үзәкләштерү (Capturing) этабы: Вакыйга тамырдан төбәккә, максат элементка таба төшә. { capture: true } опциясе белән өстәлгән вакыйга тыңлаучылары бу этапта эшли.
2. Максат этабы: Вакыйга максат элементка килеп җитә, ул урында башлана. Бу элементка турыдан-туры өстәлгән тыңлаучылар эшли.
3. Баллонлау (Bubbling) этабы: Вакыйга максат элементтан югарыга, документның тамырына кадәр күтәрелә. Стандарт рәвештә, { 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() браузерның стандарт гамәлен тыя, ләкин таралуын туктамый.