JavaScript'te Olay Kabarcıklanması

Birbiri içine yerleştirilmiş birkaç bloğunuz olduğunu hayal edin:

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

Div'lerimize referansları değişkenlere alalım:

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

Şimdi onlara tıklama olay işleyicileri ekleyelim:

elem1.addEventListener('click', function() {
	alert('yeşil');
});
elem2.addEventListener('click', function() {
	alert('mavi');
});
elem3.addEventListener('click', function() {
	alert('kırmızı');
});

Bloklarımıza biraz CSS ekleyerek ekranda gösterelim:

Şimdi en içteki kırmızı bloğa tıklayın - olayın önce kırmızı blokta, sonra mavide, daha sonra yeşilde tetiklendiğini göreceksiniz. Bu mantıklıdır, çünkü içteki bloğa tıkladığınızda, aynı anda tüm dıştaki bloklara da tıklamış olursunuz.

Yani, en içteki bloğa tıkladığınızda, tıklama olayı önce onda oluşur, ardından ebeveyninde, onun ebeveyninde vb. tetiklenir ve en tepeye ulaşana kadar devam eder.

Bu davranışa olay kabarcıklanması (bubbling) denir - havadan bir kabarcığın dipten yükselmesi benzetmesiyle. Tıpkı bir kabarcık gibi, olayımız da yukarı doğru çıkar ve her seferinde daha yüksek bloklarda tetiklenir.

Olay kabarcıklanmasını gösteren kodu kendiniz yazın. Üzerinde çeşitli olay türlerinin kabarcıklanmasını test edin.

Tüm olaylar kabarcıklanmaz. Deneysel olarak, kabarcıklanmayacak en az bir olay bulun.