Jquery ve Olaylar

Bir sayfada gezerken gerçekleştirdiğiniz olaylar vardır. Herhangi bir linke, butona vs. tıklamanız, bir resmin üzerine gelmeniz, bir formu göndermeniz, gerçekleştirdiğiniz olaylara birkaç örnektir. Bu yazıda jquery deki olayları incelemeye çalışacağız.

Öncelikle genel olarak en çok kullanılan olayları (daha doğrusu  olay yardımcılarını) açıklayalım. Daha sonra olay işleme fonksiyonları dediğimiz fonksiyonlara bir göz atalım, ardından da belki de en güzel olay fonksiyonları olan hover ve toggle fonksiyonlarını inceleyelim.

click : bir elemente tıklandığında gerçekleşen olaydır.

Sayfada bulunan bir linke tıklandığında arkaplan rengini yeşil yapalım ;

$("a").click(function(){
   $("body").css("background","green");
});

Sonuca buradan bakabilirsiniz, buradan indirebilirsiniz.

dblclick : bir elemana çift tıklandığında gerçekleşen olaydır.

mouseover : fare imleci ile bir elemanın üzerine gelme olayıdır.

Bir div elementinin üzerine gelindiğinde o elementin arkaplan rengini kırmızı yapalım ;

$("div").mouseover(function(){
   $(this).css("background","green");
});

Not : Burada this, daha önceden seçtiğimiz div elementini simgeliyor.

mouseout : fare imlecini bir elemanın üzerinden çekme olayıdır.

submit : sayfadaki bir form gönderildiğinde gerçekleşen olaydır.

focus : herhangi bir form elemanına odaklanıldığında gerçekleşen olaydır.

Bir input elementine odaklanalım ve odaklandığımızda arkaplan rengi mavi olsun, ayrıca içeriği de silinsin ;

$("input").click(function(){
   $(this).css({
      background : "#0099FF",
      color : "#FFF"
   });
   $(this).val("");
});

Sonuca buradan bakabilirsiniz, buradan da indirip inceleyebilirsiniz.

blur : odaklanılmış bir form elemanından başka bir form elemanına geçişte gerçekleşen olaydır.

change : bir form elemanının içeriği ya da niteleyicilerinden herhangi biri değiştirildiğinde gerçekleşen olaydır.

select : text tipinde input elementi ya da textarea elementinin, içeriği fare imleci ile seçildiği anda gerçekleşen olaydır.

Olay yardımcıları ilgili en çok kullanılan fonksiyonları yazdıktan sonra olay işleme fonksiyonlarına bakalım.

bind : bir elemente yukarıda bahsettiğimiz olay yardımcılarından birini atamanızı sağlar.

$("a").bind("click", function(){
   $("body").css("background","green");
});

unbind : bu fonksiyon ile bir elemente atanmış olayları kaldırabiliyoruz.

$("div").unbind("click");
$("div").unbind("click","mouseover","dblclick"); // Birden fazla olay silinebilir.
$("div").unbind(); // Elemente atanmış tüm olaylar silinir.

one : herhangi bir olayın sadece bir kez icra etmesini istiyorsanız bu fonksiyonu kullanabilirsiniz.

$("div").one("click", function(){
   $(this).css("background","red");
});

trigger : bu fonksiyon daha önceden bir elemente atanmış olayı tetikleyerek gerçekleştirir.

Mesela sayfada bulunan bir linke tıklandığında arkaplan rengini yeşil yapalım, ancak bunu bir <p> elementi üzerinden yapalım. Yani <p> elementine tıklandığında <a> elementine atanan olayı tetikleyelim ;

$("a").bind("click", function(){
   $("body").css("background","green");
});
$("p").bind("click", function(){
   $("a").trigger("click");
});

Lütfen sonuca baktıktan sonra, kodları indirip inceleyiniz.

hover Fonksiyonu

Yukarıda mouseover ve mouseout fonksiyonlarından bahsetmiştim. Bu fonksiyon ikisini birleştirerek kullanıyor. Fare imleci elementin üzerine geldiğinde mouseover, üzerinden çekildiğinde ise mouseout fonksiyonu icra ediliyor.

Fare imlecini bir div elementinin üzerine getirdiğimizde o elementi hafif şeffaf, üzerinden çektiğimizde ise eski haline getirelim ;

$("div").hover(seffaf,seffafDegil);
function seffaf(){
   $(this).css("opacity","0.5");
};
function seffafDegil(){
   $(this).css("opacity","1");
};

Sonuca buradan bakabilirsiniz, buradan da indirebilirsiniz.

Gördüğünüz gibi hover fonksiyonu içine iki farklı fonksiyon (parametre) alıyor ve fare imlecinin durumuna göre iki fonksiyondan birisini icra ediyor. Gayet yararlı bir fonksiyon değil mi ?

toggle Fonksiyonu

Toggle fonksiyonu tıklama olayıyla çalışmaktadır. Seçilen bir elemente tıklandığında sizin istediğiniz işlemleri icra etmektedir. Toggle fonksiyonunun güzel tarafı, istediğiniz işlemlerin yapılması için bir sınırın olmamasıdır. Yani hover fonksiyonundaki gibi 2 fonksiyonla sınırlı kalmazsnınız.

Sayfadaki bir linke tıklandığında arkaplan rengini sırasıyla mavi, yeşil ve kırmızı yapalım ;

$("a").toggle(maviYap,yesilYap,kirmiziYap);
function maviYap(){ $("body").css("background","blue"); };
function yesilYap(){ $("body").css("background","green"); };
function kirmiziYap(){ $("body").css("background","red"); };

Örneği buradan test edebilir, buradan da indirip inceleyebilirsiniz.

Gördüğünüz gibi toggle fonksiyonu, söylediğimiz işlemler arasında gidip gelmektedir.

Jquery ve olaylar konusunda hala eksiklerim olmasına rağmen kendimce not tutmaya çalıştım, not tutarken de yararlı olma amacıyla öğrendiklerimi paylaşmaya çalıştım. Umarım birilerine faydalı olmuşumdur.

Unutmadan, siz jquery’nin resmi sayfasındaki olaylara bakmadan geçmeyiniz. :)

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla