javaScript EVENT DELEGATİON

DOM olay delegasyonu, olay "kabarcıklanma" (başka bir deyişle olay yayılımı) etkisi ile, her çocuğa değilde, tek bir ortak ebeveyni kullanarak ui (User Interface) etkinliklerine cevap vermenin bir mekanizmasıdır. Başka bir tanımlamaya bakarsak:

Delegasyon : Olay delegasyonu, belirli düğümlere olay dinleyicileri eklemenizi önler; Bunun yerine, olay dinleyicisi bir üst öğeye eklenir. Olay dinleyicisi, çocuk öğeleri üzerinde bir click etkinliğini bulmak için kabarcık olayları analiz eder.

Delegasyon :Kısaca etkinlik temsilcisi, olay dinleyicileri, öğenin kendisine değil de bir öğenin üst öğesine iliştirilme tekniğidir; Öğenin kendisi üzerinde hareket ederek etkinliği üst öğeye devreder. Bu şekilde, hangi öğenin üzerinde çalışılacağı seçimi, olay tetiklenene kadar ertelenir.

Bir öğede bir olay tetiklendiğinde, aşağıdakiler oluşur:

Olay, hedef EventTarget öğesine gönderilir ve orada bulunan herhangi bir olay dinleyicisi tetiklenir. Kabarcıklanma olayları, ard arda her EventTarget'te kayıtlı herhangi bir olay dinleyicisini kontrol ederek EventTarget'ın üst zincirini takip ederek bulunan ek olay dinleyicilerini tetikleyecektir. Bu yukarı doğru yayılım Belge'ye kadar devam edecektir.

Etkinlik kabarcıklanma(bubbling), tarayıcılarda etkinlik temsilciliğinin(delegation) temelini oluşturur. ( bubbling "kabarcık" konusu için bakınız)

Benzer şekilde ele alınması gereken birçok öğe veya olay varsa, her biri için ayrı bir işleyici atamayın.

Bunun yerine, ortak bir ebeveyne bir işleyici atayın. Bundan, event.target'ın hedef öğesi öğrenilebilir, olayın hangi çocuğa ait olduğunu anlar ve kodları uygular.

Bu teknik delegation(Temsilci) olarak adlandırılır ve modern javaScript'de çok aktif şekilde kullanılır.

Temel kavram çok basit ama birçok kişi olay delegasyonunun(temsilci) nasıl çalıştığını anlamıyor. Olay delegasyonunun nasıl çalıştığını açıklamak ve olay delegasyonunun temel JavaScript örneklerini verelim.

ÖRNEK :

HTML :

<div id="ust">
  <p>Eleman1</p>
  <p>Eleman2</p>
  <p>Eleman3</p>
  <p>Eleman4</p>
  <p>Eleman5</p>
  <p>Eleman6</p>
  <p>Eleman7</p>
  <p>Eleman8</p>  
</div>

Yukarıdaki örnekte, id="ust" olan bir div elemanı ve bazı alt p elemanları bulunur. Genel süreçte, her p öğesinin arka plan rengini sarı olarak değiştirmemiz gerekiyorsa her p öğesine olay işleyicisi eklememiz gerekir; Ancak üst div öğesine tek bir olay işleyicisi eklersek bu olay aynı görevi yapacak olay delegasyon yöntemi ile id="ust" div öğesinin tüm alt öğesi için geçerlidir. Her bir öğeyi ayırt edersek, bir öğeye tıkladığınızda yalnızca bu p öğesinin arka plan rengi sarıya dönüşecek demektir. O zaman olay nesnesinin target anahtarını kullanmamız gerekir.

CSS :

.test{background-color:yellow}

JavaScript :

  var tar;

  var x= document.querySelector("#ust");
  
  x.onclick = function(){
  
  var target = event.target;
  
  if (target.nodeName.toLowerCase() != 'p') return;
  
  renk(target);
  
  }

function renk(target){

  if (tar) { 
  
      tar.classList.remove('test');
    
    }
  
  tar=target;
  
    tar.classList.add('test'); 
  
  }

Örnek : Birkaç alt öğeye sahip bir Ebeveyn UL öğesi oluşturalım.

HTML :

<ul id="parent">
  <li id="line-1">madde 1</li>
  <li id="line-2">madde 2</li>
  <li id="line-3">madde 3</li>
  <li id="line-4">madde 4</li>
  <li id="line-5">madde 5</li>
  <li id="line-6">madde 6</li>
</ul>
<p id="test"></p>

Yukarıdaki örnekte, id="parent" olan bir UL elemanı ve bazı alt LI elemanları bulunur. Ayrıca, her bir alt öğe tıklandığında bazı kod bloğun çalışması gerektiği söylenebilir. Her ayrı LI öğesine ayrı bir olay dinleyicisi ekleyebilirsiniz, ancak LI öğeleri sık sık eklenir ve listeden kaldırılırsa ne olur? Olay dinleyicileri, Ekleme ve kaldırma sizin için sıkıntılı süreç olacaktır. Daha iyi çözüm, üst UL öğesine bir olay dinleyicisi eklemektir. Ancak, etkinlik dinleyicisini üst öğeye eklerseniz, hangi öğenin tıklandığını nasıl bileceksiniz?

Basit olarak olay UL öğesine kadar kabarcıklanırsa, gerçek tıklanan düğüme bir referans elde etmek için olay nesnesinin target özelliğini kontrol ediniz. Aşağıda, etkinlik delegasyonunu gösteren çok basit bir JavaScript kod bloğu verilmiştir:

JavaScript :

// HTML elemanını seçin 

var x = document.getElementById("parent");

//Mesajın yazılacağı elemanı seçin

var y = document.getElementById("test");

//Seçilen elemana click dinleyici ekleyin

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

// Tıklanan eleman "li" elemanımı

if(e.target && e.target.nodeName == "LI") {

// Kaçıncı "li" elemanına tıklandı

  y.innerHTML = "Liste "+ e.target.id.replace("line-", "")+" elemanı tıklandı"

  }
});

Bu, yeni elemanların dinamik olarak oluşturulduğu veya DOM'da elemanların kaldırıldığı, birçok öğeye bağlanan olay işleyicilerine sahip web uygulamaları için kesinlikle harika bir özelliktir.

Olay temsilciliği ile her bir elemana olay dinleyicisi eklemek yerine ortak bir üst öğeye eklenerek büyük bir yükten kurtulunur.

Dinamik olarak oluşturulan yeni öğelere olay dinleyicisi ekleme zahmetinden kurtarır.

Etkinlik temsilciliğinin bir diğer yararı, olay dinleyicileri tarafından kullanılan toplam bellek alanı kayıpın azalmasıdır (etkinlik bağlarının sayısı düştüğünden dolayı). Küçük web sayfalarında belli etmez fakat büyük web sayfalarında belli eder.

DOM'dan kaldırılan öğeler hala belleği kullandığından (diğer bir deyişle bellek sızdırıyor) ve bu sızdırılan bellek, bir olay bağlamasına bağlı olduğu zaman gerçekten zor takip edilen durumlar vardır.

Event delegation (temsilciliğinde) olay dinleyicilerini eklemeyi unutma riski olmadan çocuk öğelerini silmekte serbestsiniz (dinleyici atada olduğu için).

Event delegation faydaları :

• Yönetmek için daha az fonksiyon.
• Daha az hafıza kaplar.
• Kodunuz ve DOM arasında daha az bağ vardır.
• InnerHTML methodunu DOM'u değiştirirken kullanmakta çekinmeyin; Olay işleyicilerinin kaldırılması konusunda endişelenmenize gerek yoktur.

Geleneksel olay işleme yönetiminden, olay delegasyonuna geçmek, büyük ölçekli web uygulamalarının, dünya genelindeki performansını geliştirdi. YUI ve jquery gibi JavaScript kitaplıklarının temel arabirimlerine eklemeleri ile çok önemli hale geldi. Gerçekten olay temsilciliğini uygulamak için çok az çaba sarf edilir; Ancak performans artışı, kullanıcı arabirimi aracılığıyla oldukça fark edilebilir. Düzinelerce olay işleyicisini çoçuk elemanlara eklemek yerine bir tane, ebeveyn elemana ekleme özelliği belirgindir. Etkinlik delegasyonunu deneyin ve asla geleneksel olay işleme yöntemini kullanmayabilirsiniz.

Resim Galerisi Oluşturun.

Küçük resme tıklamak suretiyle ana görüntünün değiştiği bir resim galerisi oluşturalım.

Olay delegasyonu kullanarak yapalım.

HTML :

 <p><img id="resim" src="images/rafadan.jpg" alt="Rafadaan resim"/></p>

  <ul id="bas">
    
    <li>
      <img src="images/rafadan1.jpg" title="Çizgi-resim"/>
    </li>
    <li>
      <img src="images/nemo.jpg" title="Çizgi-resim"/>
    </li>
    <li>
      <img src="images/toystory.jpg" title="Çizgi-resim"/>
    </li>
    <li>
      <img src="images/up.jpg" title="Çizgi-resim"/>
    </li>
    <li>
      <img src="images/rafadan.jpg" title="Çizgi-resim"/>
    </li>
  
  </ul>

CSS :

#bas{list-style-type: none;}

#bas li img{width:100px; height:100px;float:left}

JavaScript :

var bas = document.querySelector("#bas");
   
    bas.onclick = function(event) {
  
    var bas = event.target.closest('img');

      if (!bas) return;
    
      showbas(bas.src, bas.title);
    
      event.preventDefault();
    }

    function showbas(src, title) {
  
      resim.src = src;
    
      resim.alt = title;
    }