javaScript Event bubbling(kabarcık) ve capturing(yakalama) Nedir?

Event bubbling (kabarcık) ve capturing (yakalama) , HTML DOM'da olay yayılımının iki yoludur. Bir örnekle başlayalım. Bir onclick olayını <div> elemente atayalım, ancak <p> ve <b> gibi iç içe geçmiş elementlerden "p" veya kalın yazılı "b" etiketine tıklayalım.


<div onclick="alert('div element')">div element

<p>javascript <b>kolay</b> web proğramı</p> 

</div>

ÇIKTI:

javascript kolay web proğramı

Biraz garip değil mi? Gerçek tıklama <b> elementi Neden <div> elementin üzerindeki onclick çalışıyor?

Temel sorun çok basittir. Bir elemanın içinde bir eleman olduğunu varsayalım.

Her ikiside bir onClick olayı işleyicisine sahiptir. Kullanıcı element2'yi tıklarsa, element1 ve element2'de bir click olayına neden olur. Ama hangi olay ilk önce başlar? Hangi olay işleyicisinin önce çalıştırılması gerekir? Başka bir deyişle, olay sırası nedir?

Şaşırtıcı olmayan bir şekilde, Yıllar önce Netscape ve Microsoft farklı sonuçlar savundular.

Netscape, element1 olayının önce gerçekleştiğini söyledi. Buna olay yakalama (capturing) denir .
Microsoft, element2 olayının öncelik taşıdığını ileri sürdü. Buna olay kabarcıkları (bubbling) denir .

IE < 9 yalnızca olay kabarcıklarını kullanırken IE9 + ve tüm büyük tarayıcılar her ikisini de destekler. Öte yandan, olay kabarcıklanma performansı karmaşık DOM'lar için biraz daha düşük olabilir.

event bubbling

Olay kabarcıklanma (bubbling), bir kullanıcı iç içe geçmiş bir öğeyi tıkladığında olay kabarcıklanma (bubbling) su kabarcıkların yüzeye çıkması gibi tüm üst öğelerin onclick olayı çalışır.

Olay kabarcığı kullandığınızda

Diyelim ki, FORM > DIV > P her biri için bir işleyici içeren üç tane iç içe geçmiş elemanımız var:


<form style="font-size:1.8em;border:1px solid" onclick="alert('form')">FORM Elemanı

  <div  style="font-size:1.6em;border:1px solid" onclick="alert('div')">DIV Elemanı
  
    <p  style="font-size:1.6em;border:1px solid" onclick="alert('p')">P Elemanı</p>
  
  </div>
  
</form>

ÇIKTI:

Bu nedenle <p>, üzerine tıklarsak, 3 uyarı görürüz: p→ div→ form. Bu olay, "kabarcıklanma" olarak adlandırılır; çünkü olaylar, iç unsurdan ebeveynlere kadar su kabarcığı gibi "kabarcıklar" oluşturarak yüzeye ulaşır.

Not :Hemen hemen tüm olaylar kabarcıklanma oluşturur; Fakat istisna bazı olaylar (focus gibi) kabarcıklanmaz.

Olay kabarcıklarının durdurulması

Olay kabarcıklarını durdurmak için yalnızca event.stopPropagation() yöntemini çağırın . IE <9 için event.cancelBubble = true olur .


<body onclick="alert('kabarcıklanma olmaz')">

  <button onclick="event.stopPropagation()">Tıkla</button>
  
</body>

Event capturing

Bir olay, üst öğe üzerinde tıklama gerçekleşince iç içe geçmiş sırasında alt öğelerini tetikler.

Yakalama, olay yayılımı için Üstten alta yaklaşımdır.

IE < 9 dışında tüm tarayıcılarda, olay işleme sürecinin iki aşamayı (Kabarcık - Yakalama) destekler.

Tüm işleyiciler (onclick gibi...), son bağımsız değişkeni olan addEventListener hariç kabarcıklanma aşamasında çalışırlar; Bu nedenle capturing (yakalama) özelliğini addEventListener() methodunun useCapture parametresini false yaparak kullanacağız.

HTML :


<div id="myDiv">

<p id="myP">Event <b id="myB">capturing</b> Gösterimi</b></p>

</div>

javaScript :


var x = document.getElementById("myP")

x.addEventListener("click", function() {

    alert("P elemente tıkladın");
  
}, true);

var y = document.getElementById("myB")

y.addEventListener("click", function() {

    alert("B elementine tıkladın");
  
}, true);


var d = document.getElementById("myDiv")

d.addEventListener("click", function() {

    alert("DIV elemente tıkladın");
  
}, true);

Yukarıda ki örnekte "B" kalın yazıya tıklarsanız DIV>P>B sırasında mesajlar verecek.

W3C model

W3C, bu mücadelede orta derecede bir konumda olmaya çok mantıklı karar verdi. W3C olay modelinde gerçekleşen herhangi bir olay ilk önce hedef öğeye ulaşıncaya kadar yakalanır ve sonra tekrar kabarcıklanır.

Kısacası olay:

Yakalama 3 -> 2 -> 1 boyunca
Kabarcıklar yukarıya doğru 1 -> 2 -> 3 kabarcıklanır.

ÖZET :

Yakalama aşaması çok nadiren kullanılır, genellikle kabarcıklanma olaylarını ele alırız. Neden derseniz olayın arkasında bir mantık var.

Gerçek dünyada, bir kaza olduğunda, yerel makamlar önce tepki gösterir. Olayın meydana geldiği yeri en iyi onlar bilirler. Gerekirse daha sonra üst düzey yetkililer bilir.

Belirli bir <td> elementinde bir işleyici olsun. Bu işleyici( onclick gibi...) olayın her şeyini bilir. Ardından ebeveynide bilir, ancak biraz daha az bilir ve böylece genel kavramları işleyen ve en sonuncusu olan en üstteki unsura kadar devam eder.

gökhan 01/01/2019

Verdiğiniz bilgiler çok işime yaradı. Teşekkür etmeden siteden çıkmak istemedim 😃

Cihan 12/07/2019

Muhteşem bir yazı olmuş. Konuyla ilgili netteki tek iyi doküman diyebilirim. Teşekkür ederim.

Eldaniz Guluzade 25/09/2020

Guzel Anlatım şekli Mantıki değerlere önem verildiği için Siteni Favori kısma aldım artık Buradan bilgi araması yapacağım. Teşekkürler Saygılar Admin

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET