JavaScript-ში მოვლენების ამოსვლა

წარმოიდგინეთ, რომ გაქვთ რამდენიმე ერთმანეთში ჩადგმული ბლოკი:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

მოდი მივიღოთ ჩვენი დივების ლინკები ცვლადებში:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

ახლა კი დავამატოთ მათზე კლიკის დამმუშავებლები:

elem1.addEventListener('click', function() {
	alert('მწვანე');
});
elem2.addEventListener('click', function() {
	alert('ცისფერი');
});
elem3.addEventListener('click', function() {
	alert('წითელი');
});

გამოვიტანოთ ჩვენი ბლოკები ეკრანზე, რამდენიმე CSS-ის დამატებით:

ახლა დააწკაპუნეთ ყველაზე შიდა წითელ ბლოკზე - და თქვენ დაინახავთ, როგორ მოვლენა ჯერ გამოიწვევს წითელ ბლოკში, შემდეგ ცისფერში, შემდეგ კი მწვანეში. და ეს ლოგიკურია, რადგან შიდა ბლოკზე დაწკაპუნებისას, თქვენ ერთდროულად აწკაპუნებთ ყველა გარე ბლოკზე.

ანუ გამოდის, რომ როდესაც თქვენ აწკაპუნებთ ყველაზე შიდა ბლოკზე, კლიკის მოვლენა ჯერ ჩნდება მასში, შემდეგ გამოიწვევს მის მშობელში, მისი მშობლის მშობელში და ასე შემდეგ, სანამ არ მიაღწევს უმაღლეს წერტილს.

ამ ქცევას ეწოდება მოვლენების ამოსვლა (bubbling) - ანალოგიით ჰაერის ბუშტუკის ძირიდან ამოსვლასთან. როგორც ბუშტუკი, ჩვენი მოვლენაც თითქოს ზემოთ ამოდის, ყოველ ჯერზე უფრო მაღალ ბლოკებზე გამოწვევით.

დამოუკიდებლად დაწერეთ კოდი, რომელიც აჩვენებს მოვლენების ამოსვლას. შეამოწმეთ მასზე სხვადასხვა ტიპის მოვლენების ამოსვლა.

ყველა მოვლენა არ ამოდის. ექსპერიმენტულად იპოვეთ მინიმუმ ერთი მოვლენა, რომელიც არ ამოდის.