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