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

Sıradaki ders: Event nesnesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler