Bu yazımızda, Olay Fonksiyonlarından .trigger() fonksiyonunu inceleyeceğiz, bu fonksiyon adından da anlaşılacağı gibi yapılan bir olay karşısında başka bir olayın tetiklenmesini sağlamaktadı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.
".live()" fonksiyonu 1.9 sürümünden itibaren kaldırılmıştır, bu fonksiyonun yerine ".on()" fonksiyonunun kullanılması gerekir
- .die() //live metodu ile atanan olayları iptal eder.
".die()" fonksiyonu 1.9 sürümünden itibaren kaldırılmıştır, bu fonksiyonun yerine ".off()" fonksiyonunun kullanılması gerekir
- .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:
Trigger fonksiyonunun genel manada işlevinin kavranması açısından, açıklamamızı jQuery API sayfasında verilen örnek üzerinden yapacağım.
Bu örnekte 2 butona da basarak, butonların basılma sayılarını görebiliyoruz, fark ise, "Button-1" basıldığında sadece "Button-1" sayısı artarken, "Buton-2" ye basıldığında, hem "Button-1" hemde "Buton-2"nin sayısının artmasıdır, çünkü "Buton-2" de trigger olayı ile "Buton-1"e de basılması sağlanmıştır.
Aşağıdaki örneği incelediğinizde konunun daha iyi anlaşılacağını düşünüyorum.
0 button #1 clicks.
0 button #2 clicks.
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:140px;
padding:5px;
clear:both;
}
HTML yapısı:
<div id="area_product">
<button id="button1">Button #1</button>
<button id="button2">Button #2</button>
<div><span id="span1">0</span> button #1 clicks.</div>
<div><span id="span2">0</span> button #2 clicks.</div>
</div>
JQuery yapısı:
<script type="text/javascript">
//#button1 tıklandığında tetiklenen fonksiyon
$("#button1").click(function () {
update($("#span1"));
});
//#button2 tıklandığında
//#button1'in de basılması tetikleniyor
$("#button2").click(function () {
//#button1 trigger ile tıklanıyor
$("#button1").trigger('click');
update($("#span2"));
});
function update(j) {
//alan içindeki veriyi (text) alıp
//10'luk sistemde tamsayıya çeviriyor
var n = parseInt(j.text(), 10);
//Alınan sayıyı 1 artırıp
//tekrar aynı alana gönderiyor
j.text(n + 1);
}
</script>
Kolay gelsin, görüşmek üzere...
