jQuery bind() ve unbind() Kullanımı

Merhaba Arkadaşlar,

Bu makalede jQuery’nin bir olay kontrol aracı olan bind ve buna zıt olarak kullanılan unbind’ın ne işe yaradığını ve hangi parametreler ile kullanılabileceğini göreceğiz. Bind fonksiyonunu klasik olarak kullandığımız “click” fonksiyonu üzerinden değerlendirebiliriz. Sayfa içerisinde ki bir elemanın click fonksiyonunda yapacağı işlemleri şu şekilde tanımlıyoruz:

$(".button").click(function(){
	alert("butona tıklandı");
});

Aynı fonksiyonu bind ile kullandığımızda da şu şekilde bir yapı oluşturuyoruz:

$(".button").bind("click",function(){
	alert("butona tıklandı");
});

Çalışma mantığı olarak gördüğünüz gibi en basit kullanım şeklinde bir farklılık oluşmuyor. Farklılık doğuran alanları da görmek için bir elemanın birden fazla özelliğini kontrol edelim. Örneğin bir butonun “click” ve “hover” fonksiyonlarında işlem yapmasını istiyorsak şu şekilde bir kullanım yapıyoruz:

$(".button").click(function(){
	alert("butona tıklandı");
});

$(".button").hover(function(){
	alert("butona hover yapıldı");
});

Aynı eleman için birden fazla özelliği kontrol ederken ayrı ayrı fonksiyonlar oluşturduk. Bir çok elemanın click,hover,focus gibi özelliklerinin kontrol edeceğini düşündüğümüzde bu şekilde bir kullanım hem karışıklığa hem de kod tekrarına yol açacaktır.

Aynı fonksiyonları bind ile kullandığımızda tek bir fonksiyon tanımlayarak içerisinde hem click hem de hover özelliğini kontrol edebiliriz. Kullanımı:

$(".button").bind({
    click:function(){ 
        alert("butona tıklandı");
    },
    mouseover:function(){
        alert("butona hover yapıldı");
    }          
});

Gördüğünüz gibi “.button” class’ına sahip olan alan için tek bir kod bloğu içerisinde hem click hem de hover özelliğini kontrol ettik. Ayrıca her iki özellik sonucunda da aynı sonuç tetiklenecek ise üstte yazdığımız fonksiyonu daha da kısaltabiliriz. Kullanımı:

$(".button").bind("click mouseover",function(){
	alert("Mesaj");
});

unbind()

Yukarıda “bind” ile ilgili anlattığım tüm özelliklerin iptal edilmesini ise “unbind” ile sağlıyoruz. Örneğin sayfada bulunan bir butonumuzun ilk tıklamada alert ile bir mesaj vermesini ve daha sonra ki tıklamalarda herhangi bir işlem yapmamasını istiyoruz. Bind ve unbind’ı iç içe kullanarak aşağıda ki gibi bir kullanım ile bu özelliği sağlayabiliriz.

$(".button").bind("click",function(){
	alert("butona tıklandı");
	$(".button").unbind("click");
});