jQuery Olaylar (Events) Ders 3
jQuery Olaylar (Events) Ders 3
Merhaba,
Bu yazımızda jQuery de olayları yani event’ları işleyeceğiz. Önce event ne demek ondan kısaca bahsedelim. Event’ı tetikleme gibi düşünebiliriz. Biz bir şey yaptığımızda cümlesine denk gelmektedir. Bu bir tuşa basmak, bir şeyi değiştirmek, yüklemek vs vs gibi. Daha önceki derslerimizde hatırlarsanız bir tanımlama yapmıştım. Önce elementi seçiyoruz sonrada yapılacak işlemi. Şimdi bu ikisi arasına ufak bir tanımlama daha ekliyorum.
Elementi seç, durumu belirle, aksiyonu yap.
Yani : bu elemente tek tıklanır ise şu işlemi yap.
Buna kod ile bir örnek verecek olursak ;
|
1 2 3 4 5 |
$(“div”).click(function (){ $(“div”).hide(); }); |
Şimdi genelde kullanılan event’lara bir kaç örnek verelim.
- Mouse Olayları;
- Click (Tek tıklama)
- Dblclick (Çift Tıklama)
- Mouseenter (Bir elementin üzerine geldiğinde)
- Mouseleave (Bir elementin üzerinden çıkıldığında)
- Hover (Bu çoğu zaman mouse enter gibi sanılsada aslında hem mouseenter, hemde mouseleave özelliklerini barındırır)
Klavye Olayları ;
- Keypress (klavyeden bir tuşa basıldığında)
- KeyDown(klavyeden bir tuşa basıldığında)
- KeyUp (Klavyeden bir tuşa basıldığında değil basma işlemi sonlandığında)
- Keydown ile Keypress arasındaki fark ;
Evet ikiside klavyeden bir tuşa basıldığında bir method çalıştırır ancak KeyDown sadece methodu çalıştırır Keypress ise aynen hover gibi düşünebiliri. Down ve up komutlarını beraber kullanmamıza yarar. Spesifik değildir.
Bunların haricinde
Submit, focus, load, unload gibi olaylarda sıkça kullanılmaktadır.
Şimdi gelelim örneklerimize ;
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $(“div”).click(function(){ $(“div”).hide(); }); }); |
Yukarıdaki kod bloğunu incelediğinizde herhangi bir div in üzerine tıklandığında o divi görünmez yapacağını görmüşsünüzdür. Bir önceki dersimizde ID ile işlem yapma yı incelemiş, spesifik elementlere fonksiyon atamasını öğrenmiştik.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> $(document).ready(function(){ $("#deneme").hover(function(){ alert("Deneme Div’ine girdiniz"); }, function(){ alert("Deneme Div’inden çıktınız"); }); }); </script> <div id =”deneme”> burası deneme divi </div> |
Yukarıdaki örnekte hover eventi üzerinde alert fonksiyonunu çalıştırdık. Alert fonksiyonu ekranda açılan ufak uyarı penceresini cağırır. İçerisinede istediğiniz açıklamayı yazabilirsiniz. Webde pek sevilmez ancak bilmekte fayda var.
Aslında yapıyı incelediğinizde göreceksiniz en üstte renk ile anlattığım yapı her şekilde doğru ve kullanım şekli bu içerisine çok komplike methodlar yazabilirsiniz. Fakat durum şundan ibaret ;
Elementi seç, olayı belirle, aksiyonu yap…
Bir sonrakid yazımızda görüşmek dileğiyle,
İyi Günler Dilerim,
Cevapla
Want to join the discussion?Feel free to contribute!