Serkan Ayyıldız

Meraklı bir yazılım uzmanı...

JQuery Fare Olayları (Mouse Events)

JQuery meraklısı web yazılımcılara yeniden selamlar :)

Her makalemizde giderek JQuery dünyasını yeniden keşfettiğimiz günlerde bugün events (olaylar) konusundan bahsetmek istiyorum.
Bilgisayar teriminde olay (event) sözcüğü insan-bilgisayar etkileşimini kastetmektedir ve bilgisayarla yaptığımız hemen hemen her işlev bir olaydır diyebiliriz.
Peki bilgisayarla nasıl etkileşiyoruz derseniz size klavye ve mouse ile yaptığınız her harekettir derim :)

Asıl konumuza dönersek Javascript'ten türetilmiş bir kütüphane olan JQuery ile bilgisayar kullanıcısının yaptığı birçok etkileşimi rahatlıkla yakalayabilir ve her olay için ayrı ayrı kodlar yazabiliriz.
Örneğin kullanıcının basit bir HTML butona tıklamasını hemen hemen her makalede onclick (tıklandığında) eventini (olayını) kullanıyor ve birçok örnek uygulama gerçekleştiriyorduk.

Peki kullanıcı sadece mouse (ya da touchpad) ile butona mı tıklar?

Tabiki hayır! Butona sağ tıklayabilir,imleçi (mouse oku) üzerine getirebilir ya da o anda klavyesinden bir tuşa basabilir veya ekranı aşağı kaydırabilir felan filan...İşte tüm bu eventler için artık ayrı ayrı kodlar yazabilmenin zamanı geldi :)

JQuery ile event konusu 3'e ayrılmaktadır; ilk ikisi az önce bahsettiğim gibi bilgisayar kullanıcısının klavye ve mouse'u ile yaptığı hareketler olurken üçüncü olay ise web sayfasının kendiliğinden yaptığı hareketlerdir.

Bu üçünü sırasıyla görmeden önce Javascript ile basit bir HTML olay yazalım:



Burada görmüş olduğunuz tipi submit (gönder) olan bir HTML input nesnesi yer alıyor ve bu nesnenin onclick (tıklandığında) attribute'ünde (özelliği) bir "calistir" isimli bir javascript fonksiyonu yazılmış ancak klasik olan bu kullanım yerine ayriyeten JQuery kodları içerisinde de yazabiliyoruz.

Şimdi Adobe Dreamweaver uygulamamızı açalım ve bugünkü makalemizde öğreneceğimiz fare olayları için yeni bir HTML sayfası oluşturalım:

html-page

Sayfamızın head tagı içerisine JQuery scriptimizi tanımladıktan sonra body tagları arasına bir buton ekleyelim:

html-button

Tekrar head tagına geri dönelim ve olaylar konusunda kullanacağımız Javascript kodları için bir script tagı açalım:

javascript-tag

JQuery olayları için web sayfasının tam yüklenmiş olması gerekdiği için Document.Ready olayını unutmuyor ve olayları bu metot içerisine yazıyoruz.Yani bir nevi olay için olay gibi birşey oluyor :)
Artık hazır olduğumuza göre JQuery mouse eventlerine başlıyoruz..

a) OnClick Olayı

En sık kullanılan bu event ile kullanıcının div,buton,img gibi birçok HTML Dom nesnesine tıkladığında ne olacağını belirttiğimiz kodlardır.
Örneğin butonumuza sağ tıklandığında:

jquery-onclick

jquery-onclick-event

b) Double Click Olayı

HTML buton gibi bir nesneye çift tıklandığında çalışacak olan kodların yazıldığı eventtir.Bu eventi kullanabilmek için çift tıklanacak butonun kesinlikle onclick eventi olmaması gerekmektedir,çünkü ilk tıklama anı çift tıklama anından önce gerçekleştiği için her zaman onclick eventi tetiklenir.
Önceki butonumuza onclick eventi atadığımız için aynı butona yukarıdaki sebepten dolayı dblClick event ataması yapamıyoruz,dolayısıyla sayfamıza yeni bir buton ekliyor ve dblClick eventini yazıyoruz:

jquery-dbclick

jquery-double-click

jquery-double-click-event

c) MouseDown Olayı

OnClick olayına benzeyen bu event ile nesnenin üzerine hangi mouse tuşuyla tıklandığını da yakalayabiliyoruz.Örneğin kullanıcı bir butona sol tıkladığında farklı,sağ tıkladığın farklı,orta tuşuyla tıkladığında farklı olmak üzere toplam üç ayrı olay yakalamış oluyoruz.Tabi kullanıcı sol tıkladığında zaten OnClick ile aynı olacağı için aynı HTML nesnesinin OnClick eventi yazılmadığına dikkat edilmelidir.

Şimdi yeni bir butona daha ekleyelim:

jquery-mousedown

jquery-mouse-down-event

d) MouseUp Olayı

Bu olay ile kullanıcı bir nesneye tıkladığında değil tıklamayı bıraktığı anda çalışan bir olaydır.OnClick ile biraz benzediğini söyleyebiliriz.
Yeni bir buton daha ekleyelim ve mouse up eventine ait Javascript kodlarımızı yazalım:

jquery-mouse-up

jquery-mouse-up-event

e) MouseOut ve MouseLeave Olayları

Kullanıcı buton gibi bir nesne üzerinden fare imlecini çektiği anda tetiklenen olaylardır,kullanımı açısından hiçbir farkları yoktur.
Örneğin:

jquery-mouseout

jquery-mouse-out-event

f) MouseEnter ve MouseOver Olayları

Bir HTML nesnesinden fare imlecimizi çektiğimiz anda tetiklenecek olaylardır ve kullanım açısından herhangi bir
farkları yoktur.
Örneğin yeni bir buton ekleyelim ve imlecimizi üzerinden çekelim:

jquery-mouse-enter

jquery-mouseenter-event

g) Hover Olayı

Bir HTML nesnesinin üzerine mouse imlecini getirdiğimizde ve çektiğimizde tetiklenecek olan eventtir.Bu olay mouseout/mouseleave olaylarını tek başına içinde barındırır.Böylece mouseout/mouseleave ve mouseenter/mouseover eventlerini ayrı ayrı yazmamıza gerek kalmadığı için kullanmanızı tavsiye ettiğim event'tir.

Örneğin ilk butonumuzun üzerine mouse imlecini sürükleyelim ve çekelim:

jquery-hover

jquery-mouse-hover-event

h) MouseMove Olayı

Bir HTML nesnesi üzerinde fare imlecimizi üzerinde hareket ettirdiğimizde çalışan eventtir,dikkat ederseniz nesnenin üzerine geldiğinde demiyorum üzerinde hareket ettirdiğimizden bahsediyorum ancak fare imleci nesnenin sınırları arasına girdiğinde aynı nesnenin hover ya da mouseenter/mouseover olayları atanmışsa dikkatli olmakta fayda var ;)

jquery-mousemove

jquery-mousemove-event

JQuery mouse (fare) olayları ile ilgili bugünlük buraya kadar öğrendiklerimiz yeterli,bir sonraki makalemizde klavye olaylarında devam edeceğiz.

O yüzden sonraki makalemizde görüşmek üzere hoşçakalın :)




Bir yorum bırak E-posta adresiniz yayınlanmayacaktır.

Menu