Bu yazımızda, Olay Fonksiyonlarından .live() fonksiyonunu inceleyeceğiz ve diğer tutuculardan farkını ortaya koymaya çalışacağız, olay tutucuları, herhangi bir nesneye olay (click, mouseover, meouseenter, mouseleave vb.) atamak için kullanılan yapılardır.
Aslında jQuery 1.7 sürümü ile gelen on() ve off() fonksiyonları, hemen hemen tüm olay tutucuların (.bind(),.delegate(), .live() vb.) özelliklerinin yapmak için tasarlanmıştır, muhtemelen bu yapının oturmasıyla, diğer olay tutucular sonraki sürümlerde yavaş yavaş kaldırılacaktır.
Olay Fonksiyonları- Olay Tutucular (Event Handlers):
- .on() //"1.7 sürümü" ile dahil edilmiştir, hemen hemen diğer tutucuların tüm özelliklerini yerine getirebilir bir yapıdır.
- .off() //"1.7 sürümü" ile dahil edilmiştir, "unbind()" gibi "on()" fonksiyonu ile verilmiş olayları iptal eder.
- .bind() //Nesneye olay tetikleyici atar.
- .unbind() //Bind ile verilen olayları iptal eder.
- .live() ) //.bind() gibi nesneye olay tetikleyici atar, fakat en önemli farkı jQuery veya
javascript ile sayfaya sonradan eklenen nesneleri de görür ve olay tetikleme işini bunlarla da gerçekleştirir.
UYARI! .live() metodu 1.9 sürümü ile birlikte kaldırılmıştır, .live() yerine .on() kullanılması gerekir.
Uygulama-2'deki örnekte .live() metodu kullanılmıştır, şu an sayfada "jQuery Migrate Plugin" yüklü olduğu için bu sayfada çalışacaktır, fakat bu plugin yüklü olmadan güncel versiyonlarda çalışmayacaktır,
sadece bilgi sahibi olmak adına inceleyiniz
- .die() //live metodu ile atanan olayaları iptal eder.
UYARI! .die() metodu 1.9 sürümü ile birlikte kaldırılmıştır, .die() yerine .off() kullanılması gerekir.
Şu an sayfada "jQuery Migrate Plugin" yüklü olduğu için bu sayfada çalışacaktır, fakat bu plugin yüklü olmadan
güncel versiyonlarda çalışmayacaktır, sadece bilgi sahibi olmak adına inceleyiniz
- .one() //Olayın sadece bir kere gerçekleşmesini sağlar.
- $.proxy //İstenilen nesnenin istenilen olay yardımcısını tetiklemeyi sağlar.
- .trigger() //Herhangi bir nesneye parametreler ve fonksiyonlar eklemeye yarar.
- .unbind() //Bind ile verilen olayları iptal eder.
Uygulama - 1:
".bind()" olay tetikleyici fonksiyonuyla ilişkilendirilmiş aşağıdaki "butona" tıkladığınızda özellikleri aynı olan yeni bir buton ekleniyor, fakat bundan sonraki buton tetiklemeleri sadece ilk butona basıldıkça devam ediyor, sonradan oluşturulan butonlar aynı sınıf bilgisine sahip olmalarına rağmen bu duruma tepki vermiyor.
İkinci uygulamada aynı durum için .live()" fonksiyonu kullanılmıştır, bu uygulamada sonradan oluşturulmuş butonlar tıklandığında da olay gerçekleşip yeni butonlar eklenmektedir.
CSS yapısı:
#area_product,#area_product2{
position:relative;
width:600px;
height:200px;
border-bottom:1px solid green;
border:1px solid green;
margin-bottom:5px;
clear:both;
}
HTML yapısı:
<div id="area_product">
<button class="button1">Button Ekle...</button>
</div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Button1 bind ile click olayıyla ilişkilendiriliyor
$(".button1").bind("click",function(){
//Button1'den sonra aynı özellikte bir buton ekleniyor
//Fakat yeni butonlar bind ile tetiklenemiyor
$("#area_product .button1:last").after('<button class="button1">Button Ekle...</button>');
});
});
</script>
Uygulama - 2:
Bu uygulama birinci uygulama ile aynı, sadece ".bind()" yerine ".live()" fonksiyonu kullanılmıştır.
Bu uygulamada sonradan oluşturulan butonlara tıklanınca da yeni buton oluşturuluyor.
"İşlemi durdur" butonuyla da ".live()" fonksiyonuyla başlattığımız tetikleme olayını ".die()" metoduyla bitiriyoruz
HTML yapısı:
<div id="area_product2">
<button class="button2_live">Button Ekle...</button>
</div>
<button class="button3">İşlemi Durdur...</button>
JQuery Kodları:
<script type="text/javascript">
$(document).ready(function(){
//Button2_live live ile click olayıyla ilişkilendiriliyor
$(".button2_live").live("click",function(){
//Button2_live'den sonra aynı özellikte bir buton ekleniyor
//Yeni eklenen butonlar da live ile tetiklenebiliyor
$("#area_product2 .button2_live:last").after('<button class="button2_live">Button Ekle...</button>');
});
//live() metoduyla oluşturulan olay tetikleme sonlandırılıyor
$(".button3").click("click",function(){
$(".button2_live").die('click');
});
});
</script>
İşte ".live()" fonksiyonunun farkı burada ortaya çıkıyor, ".live()" fonksiyonu sonradan oluşturulmuş nesnelere de müdahale edebilir. Bunun esas mantığı fonksiyonun işlevini başlatıp bitirdiği yer ile ilişkilidir. Çoğu fonksiyon tek yönlü çalışır, yani, eğer fonksiyonu sayfanın başında tetiklemişsek, sayfayı aşağı doğru tarar, ilgili nesneleri bulunca da işlevini yapar, ya da tam tersi bir olay sergiler, ".live()" fonksiyonu ise sayfayı aşağı veya yukarı tarayıp fonksiyonun ilk tetiklendiği konuma gelince işlevini sonlandırır.
Örneğin: ".live()" fonksiyonu, yukarıya doğru (veya aşağıya doğru) tarama yaparken ilişkilendirilmiş bir nesneyle karşılaşınca nesne üzerinde yapması gereken görevi yapar, sonra dönüşte yeniden oluşturulan nesneyi de görüp ilk konumuna gelince işlemini sonlandırır, yani sayfada sonradan oluşturulmuş nesneyi de artık görmüştür, onun için de yeni oluşturulan nesne, eğer aynı özellikleri taşıyorsa, ".live()" fonksiyonu ile tetiklenebilir.
"İşlemi durdur" butonuyla da ".live()" fonksiyonuyla başlattığımız tetikleme olayını ".die()" metoduyla bitiriyoruz
Kolay gelsin, görüşmek üzere...
