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() თავიდან აცილებს ბრაუზერის სტანდარტულ მოქმედებას, მაგრამ არ აჩერებს გავრცელებას.