Merhabalar, bu yazımda jQuery ile mouseup, mousedown, mouseenter ve mouseleave kullanımlarından kısaca bahsedip birer örnekle nasıl çalışır sizlere anlatmaya çalışacağım.
mouseup : Fare işaretçisi belirlenen nesnenin üzerinden ayrıldığında çalışır.
mousedown : Fare ile nesne üzerine gidilip tıklandığında çalışır.
mouseenter : Fare işaretçisi nesne üzerine geldiği anda çalışır.
mouseleave : Fare işaretçisi nesne üzerinden ayrıldığı anda çalışır.
mouseover : Fare işaretçisi nesne üzerine geldiği anda çalışır.
mouseout : Fare işaretçisi nesne üzerinden ayrıldığı anda çalışır.
Şimdi bu olayları, aşağıdaki örneklerle anlamaya çalışalım.
Mouseup ve Mousedown örneği
Aşağıdaki örnekte, fareyle basıp (mousedown) bıraktığımızdaki (mouseup) farkı görebilirsiniz.
Mouseenter, Mouseleave
ve
Mouseover, Mouseout örneği
Aşağıdaki örnekte, fareyi yazının üstüne getirdiğimizde (mouseenter) renk sarı ve tekrardan yazının üstünden ayrıldığımızda (mouseleave) renk gri şeklinde oluşan farkı görebilirsiniz. Aynı şekilde fareyi diğer yazının üstüne getirdiğimizde(mouseover) renk turuncu üzerinden ayrıldığımızda (mouseout) renk gri şeklinde farkı görebilirsiniz.
Burada mouseenter, mouseover ikilisi ve mouseleave, mouseout ikilisinin event davranışları aynı gözükmekte. Aralarındaki farkı aşağıdaki örnekte açıklayalım.
Burada soldaki kutuda sayaçlardan da anlaşıldığı üzere mouseenter ve mouseleave sadece fare üzerine gelindiğinde ve fare üzerinden ayrıldığında çalışır. Sağdaki kutuda ise mouseover ve mouseout div bloklarının içerisine girip çıkmasıyla birlikte her harekette çalışır.
Anlatacaklarım bu kadar arkadaşlar, umarım örnekler anlaşılabilmiştir. Anlamadığınız bir yer varsa yorumlarda belirtebilirsiniz. İyi çalışmalar 🙂