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.

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:

FORM Elemanı
DIV Elemanı

P Elemanı

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:

Ö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.


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5788

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.