JavaScript’te Fare İzlemeyi Öğrenme

İnteraktif ve ilgi çekici web deneyimleri oluşturmak için fare hareketlerini hassas bir şekilde takip etmek çok önemlidir. Bu kılavuz, bunu başarmak için JavaScript’in sunduğu çeşitli yöntemleri, pratik tekniklere ve en iyi uygulamalara odaklanarak ele almaktadır.

İçerik Tablosu

• JavaScript’te Fare Olaylarını Anlamak
• pageX/pageY ve clientX/clientY Kullanımı
• Kaydırmayı Hesaba Katmak
• Temellerin Ötesinde: Gelişmiş Teknikler

JavaScript’te Fare Olaylarını Anlamak

JavaScript, kullanıcı etkileşimlerini yakalamak için zengin bir fare olayı kümesi sağlar. Fare konumunu izlemek için mousemove olayı çok önemlidir. Bu olay, fare hareket ettikçe tekrar tekrar tetiklenir ve imleç konumuna sürekli güncellemeler sağlar. mouseover, mouseout, mousedown ve mouseup gibi diğer olaylar değerli bağlam sunar, ancak sürekli konum takibi için doğrudan kullanılmaz.

Bu olaylar, addEventListener yöntemi kullanılarak HTML öğelerine eklenir. Örneğin:

const myElement = document.getElementById('myElement');
myElement.addEventListener('mousemove', handleMouseMove);

function handleMouseMove(event) {
  // Fare koordinatlarını burada işleyin
}

pageX/pageY ve clientX/clientY Kullanımı

mousemove olayının ilişkili nesnesi, fare koordinatlarını elde etmek için önemli özellikler sağlar:

• pageX ve pageY: Bunlar, kaydırmayı da içeren tüm belgeye göre yatay ve dikey koordinatları verir. Öğe iç içe geçmesinden bağımsız olarak tutarlıdırlar.
• clientX ve clientY: Bunlar, kaydırmayı da hesaba katarak tarayıcı penceresinin görünüm alanına göre koordinatları sağlar.

İşte bunların nasıl kullanılacağı:

function handleMouseMove(event) {
  const pageX = event.pageX;
  const pageY = event.pageY;
  const clientX = event.clientX;
  const clientY = event.clientY;

  console.log(`Sayfa koordinatları: (${pageX}, ${pageY})`);
  console.log(`İstemci koordinatları: (${clientX}, ${clientY})`);

  // Koordinatlarla UI öğelerini güncelleyin
  document.getElementById('coordinates').textContent = `X: ${pageX}, Y: ${pageY}`;
}

HTML’nizde myElement ve coordinates kimliğine sahip bir öğe eklemeyi unutmayın:

<div id="myElement" style="width: 500px; height: 300px; background-color: lightgray;">Fareyi üzerime getirin!</div>
<div id="coordinates"></div>

Kaydırmayı Hesaba Katmak

pageX ve pageY, kaydırmayı doğal olarak işler. Kullanıcı sayfayı kaydırırsa, koordinatlar buna göre ayarlanır ve her zaman tüm belgeye göre fare konumunu yansıtır. Bununla birlikte, clientX ve clientY görünüm alanına göre kalır.

Temellerin Ötesinde: Gelişmiş Teknikler

Daha karmaşık senaryolar için bu gelişmiş teknikleri göz önünde bulundurun:

• Geciktirme/Kısıtlama: Çok sık mousemove olaylarına sahip uygulamalar için performansı optimize etmek üzere, olay işleyicisinin yürütme hızını sınırlamak için geciktirme veya kısıtlama kullanın.
• Göreli Konumlandırma: Belirli bir öğe içindeki etkileşimler için, o öğenin sınırları içindeki göreli koordinatları hesaplayın.
• Dokunma Olayları: Dokunmatik özellikli cihazlar için fare olayları yerine dokunma olaylarını (touchstart, touchmove, touchend) kullanın.