Mouse olayları

mouseover, mouseout ve mousemove ile fare hareketlerini izlemeyi öğrenirsin.

mouseover ve mouseout

Fare bir öğenin üzerine gelince mouseover, öğeden çıkınca mouseout olayı tetiklenir. Bu ikisi, fareyle üzerine gelme efektleri için temel araçtır.

const card = document.querySelector('.card');
card.addEventListener('mouseover', () => {
  card.classList.add('hover');
});
card.addEventListener('mouseout', () => {
  card.classList.remove('hover');
});

İki dinleyiciyi ayrı ayrı eklersin: biri girince sınıf ekler, diğeri çıkınca kaldırır. Aynı öğeye birden fazla addEventListener çağrısı yapabilirsin; hepsi çalışır.

mousemove ve koordinatlar

Fare bir öğe üzerinde hareket ederken mousemove olayı çok sık tetiklenir. Bu olayın event.clientX ve event.clientY özellikleri farenin görünüm alanındaki konumunu verir.

const area = document.querySelector('.area');
area.addEventListener('mousemove', (event) => {
  console.log(event.clientX, event.clientY);
});

Koordinatlar pencerenin sol üst köşesinden başlar. Çok sık tetiklendiği için ağır işlemlerden kaçınılır; ama basit konum takibi için idealdir.

Uygulama Fare girince ve çıkınca sınıf değiştir

document.querySelector('.card') ile card öğesini seç. mouseover olayına bir ok fonksiyonu handler ekle ve içinde classList.add('hover') çağrısı yap; mouseout olayına da bir handler ekle ve içinde classList.remove('hover') çağrısı yap.

Örnek çözümü göster

const card = document.querySelector('.card');
card.addEventListener('mouseover', () => {
  card.classList.add('hover');
});
card.addEventListener('mouseout', () => {
  card.classList.remove('hover');
});

Kendini test et

Fare bir öğenin üzerine gelince hangi olay tetiklenir?
- mouseout
- mouseover
- mousemove
- mousedown
Cevabı göster

mouseover — Doğru! mouseover, fare öğenin üzerine gelince tetiklenir.

mouseover dinleyicisini tamamla

card.addEventListener('____', () => {
  card.classList.add('hover');
});

Cevabı göster

card.addEventListener('mouseover', () => {
  card.classList.add('hover');
});

Fare olaylarını eşleştir

mouseover

Fare girince
mouseout

Fare çıkınca
mousemove

Fare hareket edince
clientX

Yatay koordinat

Sıradaki ders: Klavye olayları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler