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ı,
|
1 2 3 |
$(document).ready(function(){ // Kodlar buraya yazılacak }); |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 |
<button id="click">click olayı</button> <script> $(document).ready(function(){ $("#click").click(function() { alert("click olayı gerçekleşti.") }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 |
<button id="dblclick">dblclick olayı</button> <script> $(document).ready(function(){ $("#dblclick").dblclick(function() { alert("dblclick olayı gerçekleşti.") }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> <button>mousemove olayı</button> <br> <button>X koordinatı: <span id="pageX">0</span></button> <button>Y koordinatı: <span id="pageY">0</span></button> </div> <script> $(document).ready(function(){ $(window).mousemove(function(event) { $("span#pageX").text(event.pageX); $("span#pageY").text(event.pageY); }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 |
<button id="mouseenter">mouseenter olayı</button> <script> $(document).ready(function(){ $("#mouseenter").mouseenter(function() { alert("mouseenter olayı gerçekleşti.") }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 |
<button id="mouseleave">mouseleave olayı</button> <script> $(document).ready(function(){ $("#mouseleave").mouseleave(function() { alert("mouseleave olayı gerçekleşti.") }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<button id="hover">hover olayı</button> <script> $(document).ready(function(){ $("#hover").hover(function() { $(this).css("background-color", "#E7512F") }, function() { $(this).css("background-color", "#007BFF") }); }); </script> |
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 Scroll, Select, On, Off, One Olayları
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
