JavaScript'te Olayların İç İşleyişi

Olay kabarcıklanmasının yanı sıra bir de yakalama (capturing) aşaması vardır. Aslında bir olay önce yukarıdan aşağıya doğru ilerler (yakalama aşaması), hedef öğemize ulaşır (hedef aşaması) ve ancak ondan sonra kabarcıklanmaya başlar (kabarcıklanma aşaması).

Bir olay dinleyicisini yakalama aşamasında çalışacak şekilde eklemek için addEventListener metodunun üçüncü, isteğe bağlı parametresi kullanılır. Eğer bu parametre true ise - olay yakalama aşamasında tetiklenir, false ise - kabarcıklanma aşamasında (varsayılan değer budur). Bir örnekle inceleyelim:

elem1.addEventListener('click', function() {
	console.log('yeşil - yakalama');
}, true);
elem1.addEventListener('click', function() {
	console.log('yeşil - kabarcıklanma');
}, false);

elem2.addEventListener('click', function() {
	console.log('mavi - yakalama');
}, true);
elem2.addEventListener('click', function() {
	console.log('mavi - kabarcıklanma');
}, false);

elem3.addEventListener('click', function() {
	console.log('kırmızı - yakalama');
}, true);
elem3.addEventListener('click', function() {
	console.log('kırmızı - kabarcıklanma');
}, false);

Kontrol edebilirsiniz: