JavaScriptте чыгуу эмне?

Механизм, анда DOM элементинде ишке ашырылган окуя "жогору" тарайт, анын ата-эне элементтерине чейин (document). Көпчүлүк окуялар үч этаптан өтөт:

1. Таркатуу этабы (Capturing phase): Окуя түбөдөн төмөн карай, максаттуу элементке чейин жылжыйт. { capture: true } опциясы менен байланган угучулар бул этапта иштейт:
2. Максаттуу этап (Target phase): Окуя максаттуу элементке жетет, ал жерде ал ишке ашырылат. Түз байланган угучулар иштейт:
3. Өзгөртүү этап (Bubbling phase): Окуя максаттуу элементтен жогору, документтин түбүнө чейин көтөрүлөт. Адатта байланган угучулар, { 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() браузердин стандарттык аракетин алдын алат, бирок таралышын токтотпойт.