JQuery Olaylar

Merhaba Arkadaşlar,
Bu yazımızda Jquery’de olaylar konusunu örnek uygulamalar yaparak öğreneceğiz.Olay dediğimiz kavram aslında hepimizin bildiği bir konu.İnternet ortamında gördüğünüz bir butonun tıklanması, bir formun doldurulup gönderilmesi, bir dropdown listesinden seçim yapılması vb.. gibi aksiyonlar birer olaydır.En çok kullanıldığını düşündüğüm olayları aşağıda listeledim.Diğer olaylar hakkında bilgi almak isterseniz Jquery sitesini ziyaret edebilirsiniz.Eğer Jquery Seçiciler konusunda eksikleriniz varsa JQuery Dersleri 3 – Seçiciler makalesine bakabilirsiniz.Örneklerimizde ilk önce olayın ne olduğundan bahsedip, örnek kodları paylaşacağım.Konunun sonunda ise bu kodların uygulamasını paylaştım.Örnekleri incelerseniz daha iyi anlaşılacaktır.

Dikkat: Yazdığınız kodları $(document).ready(function(){ // Kodlar buraya yazılacak }); içerisinde yazmanız daha iyi olacaktır.Bu konuda daha fazla bilgi için JQuery Dersleri 2 – Document Ready Nedir? makalesini okuyabilirsiniz.

1 – Fare Olayları

► click olayı
Fare ile tıklama olayıdır.Örneğin id’si click olan butona tıklandığında alert ile mesaj verelim.Kodlarımız şu şekilde;

► dblclick
Fare ile çift tıklama olayıdır.Örneğin id’si dblclick olan butona çift tıklandığında alert ile mesaj verelim.Kodlarımız şu şekilde;

► mousemove ve event.pageX,event.pageY
mousemove, farenin hareketi olayıdır.pageX ve pageY ise farenin sayfamızdaki X ve Y koordinatlarını verir.Sayfanın sol üst köşesi 0,0 yani orjin olarak kabul edilir.Örneğimizde farenin her hareketindeevent.pageX ve event.pageY ile o anki koordinatını butonların text’ine yazdıralım. 

► mouseenter
Fare ile üzerine gelme olayıdır.Örneğin id’si mouseenter olan butonun üzerine gelindiğinde alert ile mesaj verelim.Kodlarımız şu şekilde;

► mouseleave
Fare ile üzerinden ayrılma olayıdır.Örneğin id’si mouseleave olan butonun üzerinden ayrıldığı anda alert ile mesaj verelim.Kodlarımız şu şekilde;

► hover
Hover olayı, mouseenter ve mouseleave olaylarının birleşimi diyebiliriz.Yani fare ile üzerine gelme ve ayrılma olaylarının birleşimidir.Örneğin id’si hover olan butonun üzerine gelindiğinde arkaplan rengini #E7512F, üzerinden ayrıldığı anda ise arkaplan rengini #007BFF yapalım.Kodlarımız şu şekilde;

2 – Klavye Olayları

► keypress
Klavyede herhangi bir tuşa basılması olayıdır.Örneğin id’si keypress olan input içerisine focus’lanıp klavyeden bir tuşa basıldığında alert ile mesaj verelim.Kodlarımız şu şekilde;

► keydown
Klavyede herhangi bir tuşa ilk basıldığı andır.Örneğin id’si keydown olan input içerisine focus’lanıp klavyeden bir tuşa basıldığında alert ile mesaj verelim.Kodlarımız şu şekilde;

► keyup
Keydown’un tersine klavyede herhangi bir tuşa basıldıktan sonra elimizi kaldırdığımız andır.Örneğin id’si keyup olan input içerisine focus’lanıp klavyeden bir tuşa uzunca basıldığında en son elimizi kaldırdığımız an için alert ile mesaj verelim.Kodlarımız şu şekilde;

3 – Form Olayları

► submit
Bildiğiniz gibi form etiketleri ile bilgi girişi sağlandıktan sonra formu submit ederiz.Formun submit olması olayıdır.Örneğin id’si submit olan form Gönder butonu ile submit edildiğinde alert ile mesaj verelim.Kodlarımız şu şekilde;

► change
Bir durumun değişmesi olayıdır.Örneğin id’si change olan bir dropdown listemiz olsun.Listede İstanbul, Ankara ve İzmir var.Listeden herhangi birini seçtiğimizde yani bir değişiklik olduğunda change olayını tetikleyip alert ile mesaj verelim.Kodlarımız şu şekilde;

► focus ve blur
Bir input içerisine fare ile tıklayıp odaklanması olayı focus, fare ile input dışında bir yere tıklanmasıda blur olayıdır.Örneğimizde id’si focus-blur  olan input’un focus olayında arkaplan rengini #E7512F, blur olayında ise arkaplan rengini #FFFFFF yapalım.Kodlarımız şu şekilde;

4 – Diğer

► select
Text tipinde input etiketi yada textarea etiketinin içeriğini, fare imleci ile seçtiğimiz anda gerçekleşen olaydır.Textarea içerisindeki yazının bir kısmını seçtiğimizde alert ile mesaj verelim.Kodlarımız şu şekilde;

► scroll
Scroll’un her hareketinde tetiklenen olaydır.Örneğimizde scroll her hareket ettiğinde varolan yazının sonuna, scroll’u hareket ettiriyorsunuz! yazısını ekleyelim.Kodlarımız şu şekilde;

► on 
Bir html etiketi üzerinde birden fazla olayı gerçekleştirmek istediğimiz durumlarda kullanabiliriz.Örneğimizdeki  butona 3 farklı olay (mouseenter, mouseleave, click) tanımlayalım.Butonun rengini, tıklandığında farklı bir renk, fare ile üzerine gelindiğinde farklı bir renk, fare ile üzerinden ayrıldığında farklı bir renk yapalım.Kodlarımız şu şekilde;

► off 
Bir olayı istediğimiz zaman pasif hale getirmek için kullanılır.Örneğin id’si off olan butona her tıklandığında alert mesajı verelim.Ne zaman id’si off-disabled olan butona tıklarsak, ilk butonun click olayını pasif hale getirmiş oluruz.Artık tıklansa bile click olayı çalışmayacaktır.Kodlarımız şu şekilde;

► one 
Bir olayın sadece bir defa çalışması durumudur.Örneğimizde butona ilk tıklamada alert ile mesaj verelim.Bu mesajdan sonra butona tıklansa bile click olayı tetiklenmeyecektir.Çünkü one metodu ile sadece bir defa çalışmasını sağladık.Kodlarımız şu şekilde;

Yeni bir makalede görüşmek üzere.

Önceki : JQuery Dersleri 3 – Seçiciler

Sonraki : JQuery Dersleri 5 – hide(), show(), toggle() Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +