Web sitelerinde gezinirken bazen bir şeylere imleci yaklaştırdığınızda bir şeylerin değiştiğini fark etmişsinizdir. Hani böyle bir resmin üstüne gelince daha belirginleşmesi ya da bir menünün açılması gibi durumlar… İşte bunların arkasında yatan sihirli değneklerden biri de mouse olayları. Özellikle mouseenter, mouseleave ve mousemove gibi olaylar, kullanıcı deneyimini bir üst seviyeye taşımanın en kolay yollarından bana göre.
Şimdi bu olaylar tam olarak ne işe yarıyor, nasıl kullanılıyor, gelin birlikte bir bakalım. Hani bazen bir şeyleri yaparken ‘Aa, bu ne kadar basitmiş!’ dediğimiz anlar olur ya, işte bu da onlardan biri olacak sanırım.
Öncelikle bu olayların ne demek olduğunu bir anlayalım. Mouseenter olayı, imleciniz bir elementin üzerine geldiğinde tetiklenir. Yani, imleç o alana girdiğinde ‘Hoş geldin!’ diyor gibi düşünebilirsiniz. Mouseleave olayı ise tam tersi; imleç o elementten çıktığında devreye girer. ‘Güle güle!’ diyor yani.
mousemove olayı ise biraz daha hareketli. İmleç elementin üzerindeyken her hareket ettiğinde sürekli olarak çalışır. Bu da bize gerçek zamanlı etkileşimler için harika bir kapı aralıyor, değil mi?
Bu olayları neden kullanmalıyız diye soracak olursanız, cevabı basit: Etkileşimli ve dinamik arayüzler için. Düşünsenize, bir butona yaklaştığınızda renginin değişmesi, bir ürün görseline fareyi götürünce altındaki açıklamaların belirmesi, hatta bir oyun yaparken karakterin hareket etmesi… Hepsi bu temel olaylarla mümkün. İnternette gezerken bu kadar çok şeyin bu basit olaylarla yapılabildiğini bilmek bence ilginç.
Peki, bunları nasıl kodlarız? İşte burası işin eğlenceli kısmı. JavaScript ile bu olayları yakalamak oldukça kolay. Genelde bir HTML elementini seçip, ona bir event listener ekleyerek başlıyoruz. Hani derler ya ‘bir taşı attın, üç kuş vurdun’, işte bu da öyle bir şey.
Örneğin, bir div’imiz olduğunu düşünelim. Bu div’in üzerine imleç geldiğinde arka plan renginin değişmesini, çıktığında ise eski haline dönmesini istiyoruz. Çok basit bir senaryo ama olayı anlamak için birebir. Şöyle bir HTML kodumuz olsa:
<div id=’benimDivim’ style=’width: 100px; height: 100px; background-color: lightblue;’></div>
Şimdi bu div’i seçip olayları bağlayalım:
“`javascript const benimDivim = document.getElementById(‘benimDivim’);
benimDivim.addEventListener(‘mouseenter’, function() { benimDivim.style.backgroundColor = ‘lightcoral’; // İmleç girince renk değişsin console.log(‘Fare div’e girdi!’); });
benimDivim.addEventListener(‘mouseleave’, function() { benimDivim.style.backgroundColor = ‘lightblue’; // İmleç çıkınca eski haline dönsün console.log(‘Fare div’den çıktı!’); }); “`
Evet, bu kadar basit. Kendi programım sınıfta kaldı der gibi bir durum yok burada, gayet güzel çalışıyor 🙂 Bu kodla, imleciniz o mavi kareye yaklaştığında kırmızıya dönecek, uzaklaştığında tekrar mavi olacak. Ne güzel değil mi?
Şimdi gelelim mousemove olayına. Bu biraz daha can sıkıcı olabilir eğer dikkatli olmazsanız, çünkü imleç hareket ettikçe sürekli tetiklenir. Yanlış kullanırsanız tarayıcınızı yavaşlatabilir, hatta ‘don’ma’ noktasına getirebilir. Bu yüzden onu daha çok belirli bir alan içinde fare konumunu almak için kullanmak mantıklı. Mesela bir çizim alanı yaptığınızı düşünün, fare nereye giderse orada bir nokta çizilsin istiyorsunuz. Ya da bir oyun karakterini fareyle yönlendirmek gibi.
Şöyle bir örnek düşünelim: İmlecin faremizin div içinde nerede olduğunu bir konsola yazdıralım. Yine aynı div’i kullanacağız ama bu sefer mousemove olayını ekleyeceğiz.
“`javascript // Yukarıdaki mouseenter ve mouseleave olaylarına ek olarak:
benimDivim.addEventListener(‘mousemove’, function(event) { const x = event.clientX – benimDivim.getBoundingClientRect().left; // Div içindeki X konumu const y = event.clientY – benimDivim.getBoundingClientRect().top; // Div içindeki Y konumu console.log(`Fare konumu: X=${x.toFixed(0)}, Y=${y.toFixed(0)}`); }); “`
Burada `event` nesnesi çok önemli. Bu nesne, olayın detaylarını içeriyor. `clientX` ve `clientY`, pencereye göre fare koordinatlarını verirken, `getBoundingClientRect()` metodu elementin boyutlarını ve pencereye göre konumunu veriyor. Biz de bu bilgileri kullanarak div’in kendi içindeki göreceli koordinatları buluyoruz.toFixed(0) ile de ondalık kısımları yuvarlıyoruz ki konsol daha temiz görünsün.
Bu arada, bu olayları sadece basit renk değişimleri veya koordinat alma için değil, daha karmaşık etkileşimler için de kullanabilirsiniz. Mesela, bir kaydırma çubuğunu sürüklerken, mousemove olayıyla elementin pozisyonunu güncelleyebilirsiniz. Veya bir galeri içinde fareyle gezinirken farklı resimleri gösterebilirsiniz. Hani derler ya ‘gökyüzü senin sınırın’, bu olaylar için de öyle bir şey geçerli sanırım.
Genelde bu tür etkileşimlerde performans da önemli bir konu. Özellikle mousemove olayını sık sık kullanıyorsanız, DOM manipülasyonunu (yani elementlerin stilini veya içeriğini değiştirmeyi) olabildiğince az tutmak gerekiyor. Çünkü her hareket ettiğinde DOM’u güncellemek tarayıcıyı yorabilir. Bunun yerine, bir değişkeni güncelleyip, sadece gerektiğinde DOM’u güncelleyen bir strateji izlemek daha akıllıca olabilir. Ya da daha iyisi, `requestAnimationFrame` gibi şeyleri kullanarak tarayıcının en uygun zamanda güncellemeyi yapmasını sağlamak.
Neticede, bu mouse olayları web sitelerine can katmak için harika araçlar. Basit görünen ama çok güçlü etkileşimler yaratmamızı sağlıyorlar. Yani şey gibi… neyse anladın sen 🙂 Bu yüzden, bir sonraki projenizde kullanıcı deneyimini bir tık daha ileriye taşımak istediğinizde bu olayları kullanmaktan çekinmeyin derim.
Bir de şu var tabii, bazen bu olayları doğru elemente atamak önemli. Hani bazen bir şey çalışmıyor diye saatlerce uğraşırsınız, sonra bakarsınız ki olayı yanlış elemente bağlamışsınız. 🙂 Bu yüzden önce doğru elementi seçtiğinizden emin olun. Mesela konsolda `console.log(benimDivim)` ile seçtiğiniz elementin doğru gelip gelmediğini kontrol edebilirsiniz. Bu da benim gibi bazen ufak tefek hatalar yapanlar için hayat kurtarıcı olabilir.
Sonuç olarak, mouseenter, mouseleave ve mousemove olayları, web geliştiricilerinin elindeki en temel ve etkili araçlardan bazıları. Kendi projelerinizde bunları nasıl kullanabileceğinizi düşünün. Belki de üzerinde çalıştığınız bir e-ticaret sitesinde ürünlere yaklaştıkça detayların belirmesini sağlayabilir, ya da bir portfolyo sitesinde projelerin üzerine gelince animasyonların devreye girmesini sağlayabilirsiniz. Bu küçük dokunuşlar, kullanıcıların sitenizle daha derin bir bağ kurmasına yardımcı olacaktır.
Eğer daha fazla örnek görmek isterseniz, Google’da veya YouTube’da ‘javascript mouse events examples’ diye aratabilirsiniz. Birçok güzel demo bulabilirsiniz sanırım. Mesela YouTube’da bununla ilgili bir sürü video var. Ya da Google’da aratarak da ilginç makalelere denk gelebilirsiniz.