JQuery Fare Olayları

Bu yazımızda Jquery fare olayları yani click, dblclick, mousemove, mouseenter, mouseleave ve hover olaylarını örnek uygulamalar üzerinden anlatacağım.

Olay dediğimiz kavram aslında hepimizin bildiği bir konu. Bir butonun tıklanması, fare ile bir nesnenin üzerine gelinmesi, bir formun doldurulup gönderilmesi, klavyeden bir tuşa basılması, açılır menüden seçim yapılması vb.. gibi aksiyonlar birer olaydır.

Örneklerimizde ilk önce olayın ne olduğundan bahsedip, ilgili örneğin kodlarını paylaşacağım. Yazının sonunda ise bu kodların uygulamasını paylaşacağım. 

Uygulama üzerinde her bir olayı ayrı ayrı incelerseniz daha iyi anlaşılacaktır.

 Önemli  Yazacağınız Jquery kodlarını, 

içerisinde yazmaya çalışın. Neden bu şekilde yazmamız gerektiği ile ilgili bir yazım bulunuyor. Bunun için JQuery Document Ready Nedir? yazımı okuyabilirsiniz.

JQUERY FARE OLAYLARI

1 – JQUERY CLİCK OLAYI

Click, fare ile tıklama olayıdır. Örneğin id’si click olan butona tıklandığında alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

2 – JQUERY DBLCLİCK OLAYI

Dblclick, fare ile çift tıklama olayıdır. Örneğin id’si dblclick olan butona çift tıklandığında alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

3 – JQUERY MOUSEMOVE OLAYI

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 hareketinde event.pageX ve event.pageY ile farenin o an ki koordinatlarını butonların text’ine yazdıralım. 

Html ve Jquery Kodları

4 – JQUERY MOUSEENTER OLAYI

Mouseenter, fare ile nesnenin üzerine gelme olayıdır. Örneğin id’si mouseenter olan butonun üzerine gelindiğinde alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

5 – JQUERY MOUSELEAVE OLAYI

Mouseleave, fare ile nesnenin üzerinden ayrılma olayıdır. Örneğin id’si mouseleave olan butonun üzerinden farenin ayrıldığı anda alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

6 – JQUERY HOVER OLAYI

Hover olayı, mouseenter ve mouseleave olaylarının birleşimi diyebiliriz. Yani fare ile nesnenin üzerine gelme ve nesnenin üzerinden 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.

Html ve Jquery Kodları

Tüm Jquery fare olaylarını tek uygulama üzerinde birleştirdim. Tek tek uygulayarak inceleyebilirsiniz.

Jquery fare olayları hakkında daha fazla bilgi almak isterseniz JQuery sitesini ziyaret edebilirsiniz.

Şu yazılar da ilginizi çekebilir.

JQuery Klavye Olayları

JQuery Form Olayları

JQuery Scroll, Select, On, Off, One Olayları

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın