JQuery Öğreniyorum – 4 (Events)

Önceki yazılarımda seçiler konusunda bilgi vermeye çalıştım. Bu yazımda ise nesneler üzerinde bulunan olaylardan bahsetmeye çalışacağım.

ilk olarak JQuery de onload olayı nasıl yazabileceğimizi inceleyelim.

window.onload(function(){
  //sayfa yüklendiğin çalışır
});

Yukarıda standart olarak kullanabileceğimiz şekli yazmış olduk.Bu işlevi JQuery de yazmak için iki yöntem bulunmaktadır.

1.şekilde olarak

$(documan).ready(function(){
  //sayfa yüklendiğin çalışır
});

Yukarıda sayfa hazırlandığında(ready) içinde bulunan fonksiyonu tetiklenmesi sağlanmaktadır.

2.şekilde olarak

$(function(){
    //sayfa yüklendiğin çalışır
});

Yukarıda javascript kodun script taglari aralarına yazarak çalıştırmaya benzer bir uygulamadır.

Şimdi ise uygulamalarım kullandığımız nesnelerde fazlaca kullandığımız olayları inceleyelim. İlk olarak “a” link elementinin tıklandığında bize merhaba diyek bir uygulama tasarlayalım.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).click(function(){
//a tag seçtik ve click olayını belirledik.
        alert(“merhaba”);//javascript standart mesaj komutunu kullandık
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

Yukarıda uygulamayı gördükten sonra en çok kullandığım diğer  bir olay ise hover olayıdır. Yani nesnenin üzerine gelindiğinde çalışan olayı görelim.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).hover(function(){
//a tag seçtik ve hover olayını seçtik
        alert(“merhaba”);//javascript standart mesaj komutunu kullandık
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

Şimdi ise nesneye çift tıklandığında tetiklenecek olan olayı inceleyelim.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).dblclick(function(){
//a tag çiftıklama olayı atandır.
        alert(“merhaba”);//standart javascrpit komutu
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

En çok kullandığımız olaylardan sonra ise olaylar ile ilgili olan fonksiyonları kullanımlarını görelim. Bu fonksiyonlar ile web sayfalarımızda  daha iyi bir şekilde olayları yönetimi yapabiliriz.

ilk olarak bind() fonksiyonu kullanalım.bind() fonksiyonu örnek olarak bind(“click”) yani click olayı  yakalayabiliriz.Parantez içerisine istediğimiz gibi olayları kullanarak çalıştırabiliriz.

$(function(){
$(“a”).bind(“click”,function(){
// a tag click olayına bağlanmış oldu.
        alert(“merhaba”);
});
});

bind fonksiyonu, ters bir fonksiyonun vardır.unbind fonksiyonu örneğin click olayı kaldırabiliriz.

$(function(){
$(“a”).unbind(“click”);
//a tag click olayı kaldımış oldu.
    });

Son olarak da trigger()fonksiyondan bahsetmek istiyorum.Bu fonksiyonu uygulama içerisinde programatik olarak tetiklememiz gereken durumlarda kullanabiliriz.

$(‘#divmenu’).bind(‘click’, function() {
alert(“merhaba”);
});
$(‘#divmenu’).trigger(‘click’);

Öncelikler divmenu nesnesine bir click olay tanımladık ve daha sonra bu olayı trigger fonksiyonu kullanarak çağırdık.

Sonuç olarak bu yazımda olaylar ve nesnelere nasıl olay bağlayacağımız görmüş olduk.Bir daha ki yazımda görüşmek üzeri

Saygılarımla

IBRAHIM ATAY

Leave a Reply

Your email address will not be published. Required fields are marked *