Klavye olayları
keydown ve keyup ile basılan tuşları nasıl yakalayacağını öğrenirsin.
keydown ve keyup
Klavye olayları iki temel olaydan oluşur: bir tuşa basınca keydown, tuşu bırakınca keyup tetiklenir. Tuşu basılı tutarsan keydown sürekli tekrar eder.
document.addEventListener('keydown', (event) => {
console.log('Basıldı:', event.key);
});
document.addEventListener('keyup', (event) => {
console.log('Bırakıldı:', event.key);
});Eski kodlarda keypress görebilirsin; ama bu olay kullanımdan kaldırıldı ve yeni kodlarda tercih edilmez. Yeni işlerde keydown kullan.
event.key ile tuşu okumak
Klavye olaylarında event.key özelliği basılan tuşun değerini verir. Harfler için 'a', 'b' gibi küçük harf; özel tuşlar için 'Enter', 'Escape', 'ArrowUp' gibi okunan ad döner.
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Enter tuşuna basıldı');
}
});Büyük/küçük harf duyarlıdır: 'a' ile 'A' farklı değerlerdir. Shift ile basılırsa 'A' döner. Bu yüzden karşılaştırmada her zaman tam değeri kullan.
Uygulama keydown ile basılan tuşu yaz
document.addEventListener('keydown', ...) ile bir ok fonksiyonu handler ekle. Handler parametresi event olsun ve içinde console.log(event.key) çağrısı yapsın.
Örnek çözümü göster
document.addEventListener('keydown', (event) => {
console.log(event.key);
});Kendini test et
-
Bir tuşa basılı tutulduğunda sürekli tetiklenen olay hangisidir?
- keyup
- change
- input
- keydown
Cevabı göster
keydown — Doğru! keydown, tuş basılı tutulduğunda sürekli tekrar eder.
-
keydown dinleyicisini tamamla
document.addEventListener('____', (event) => { console.log(event.key); });Cevabı göster
document.addEventListener('keydown', (event) => { console.log(event.key); }); -
Klavye kavramlarını eşleştir
- keydown
- Tuşa basılınca
- keyup
- Tuş bırakılınca
- event.key
- Basılan tuşun değeri
- 'Enter'
- Onay tuşu