Şimdiye kadar çoğunlukla tıklama (click) olaylarıyla çalıştık. Ancak web uygulamalarında klavye etkileşimleri de oldukça önemlidir. Oyunlarda karakter kontrolü, form doğrulama, kısayol tuşları ve daha birçok özellik klavye olaylarına dayanır. Bu makalede klavye olaylarını ve her event'te otomatik olarak gelen Event Object (Olay Nesnesi) kavramını öğreneceğiz.
Event Object Nedir?
Her event tetiklendiğinde, JavaScript otomatik olarak bir event object oluşturur ve callback fonksiyonumuza parametre olarak gönderir. Bu nesne, olay hakkında detaylı bilgiler içerir.
const buton = document.querySelector('#benimButon');
buton.addEventListener('click', function(event) {
console.log(event); // Event object'i gösterir
});Event Object'teki Bazı Önemli Özellikler
| Özellik | Açıklama |
|---|---|
event.type | Olayın türü (click, keydown, submit vb.) |
event.target | Olayı başlatan element |
event.currentTarget | Event listener'ın bağlı olduğu element |
event.clientX / clientY | Fare tıklamasının koordinatları |
event.key | Basılan tuşun değeri (klavye için) |
event.code | Basılan tuşun fiziksel konumu (klavye için) |
Click Event'te Event Object
const kutu = document.querySelector('.kutu');
kutu.addEventListener('click', function(event) {
console.log('Olay türü:', event.type); // "click"
console.log('Tıklanan element:', event.target); // .kutu elementi
console.log('X koordinatı:', event.clientX); // Örn: 150
console.log('Y koordinatı:', event.clientY); // Örn: 200
});Gerçek Hayat Örneği: Tıklanan Yerde Efekt Gösterme
const sayfa = document.body;
sayfa.addEventListener('click', function(event) {
// Tıklanan yerde bir daire oluştur
const daire = document.createElement('div');
daire.classList.add('tiklama-efekti');
daire.style.left = event.clientX + 'px';
daire.style.top = event.clientY + 'px';
sayfa.appendChild(daire);
// 500ms sonra daireyi kaldır
setTimeout(function() {
daire.remove();
}, 500);
});Klavye Olayları (Keyboard Events)
Klavye için üç temel olay türü vardır:
| Olay | Ne Zaman Tetiklenir |
|---|---|
keydown | Tuşa basıldığı anda |
keyup | Tuş bırakıldığı anda |
keypress | ⚠️ Kullanımdan kaldırıldı (deprecated) |
keydown vs keyup
const input = document.querySelector('#aramaKutusu');
input.addEventListener('keydown', function(event) {
console.log('Tuş BASILDI:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Tuş BIRAKILDI:', event.key);
});Bir tuşa bastığınızda ve bıraktığınızda:
- Önce
keydowntetiklenir (tuşa basılınca) - Sonra
keyuptetiklenir (tuş bırakılınca)
Sürekli Basılı Tutma
Bir tuşu basılı tuttuğunuzda keydown sürekli tetiklenir, ama keyup sadece tuşu bıraktığınızda bir kez tetiklenir.
window.addEventListener('keydown', function(event) {
console.log('keydown tetiklendi');
});
// Tuşu basılı tutarsanız: keydown, keydown, keydown, keydown...
// Tuşu bırakırsanız: keyup (sadece bir kez)event.key vs event.code
Bu iki özellik klavye olaylarında çok önemlidir:
| Özellik | Açıklama | Örnek |
|---|---|---|
event.key | Üretilen karakteri gösterir | "a", "A", "Enter", "Shift" |
event.code | Fiziksel tuştanın konumunu gösterir | "KeyA", "ShiftLeft", "ArrowUp" |
window.addEventListener('keydown', function(event) {
console.log('key:', event.key); // "a" veya "A"
console.log('code:', event.code); // "KeyA"
});Ne Zaman Hangisini Kullanmalı?
event.key kullanın:
- Kullanıcının yazdığı karakteri öğrenmek istiyorsanız
- Büyük/küçük harf fark etsin istiyorsanız
event.code kullanın:
- Oyun kontrolleri için (WASD tuşları)
- Klavye düzeninden bağımsız çalışması gerekiyorsa
- Fiziksel tuş konumu önemliyse
Türkçe Klavye Örneği
window.addEventListener('keydown', function(event) {
// Türkçe "ş" tuşuna basıldığında
console.log('key:', event.key); // "ş"
console.log('code:', event.code); // "Semicolon" (fiziksel konum)
});Gerçek Hayat Örneği: Basit Oyun Kontrolü
Bir karakteri ok tuşlarıyla hareket ettirme:
const karakter = document.querySelector('#karakter');
let x = 0;
let y = 0;
const hiz = 10;
window.addEventListener('keydown', function(event) {
switch(event.code) {
case 'ArrowUp':
y -= hiz;
break;
case 'ArrowDown':
y += hiz;
break;
case 'ArrowLeft':
x -= hiz;
break;
case 'ArrowRight':
x += hiz;
break;
case 'Space':
console.log('Zıpla!');
break;
}
karakter.style.transform = `translate(${x}px, ${y}px)`;
});Gerçek Hayat Örneği: WASD Kontrolü
Oyunlarda sıkça kullanılan WASD tuşları:
window.addEventListener('keydown', function(event) {
switch(event.code) {
case 'KeyW':
ilerle();
break;
case 'KeyA':
solaDon();
break;
case 'KeyS':
geriGel();
break;
case 'KeyD':
sagaDon();
break;
}
});💡 Not:
event.codekullanıyoruz çünkü farklı klavye düzenlerinde (Fransızca AZERTY gibi) tuşların yerleri değişse bile fiziksel konum aynı kalır.
Gerçek Hayat Örneği: Klavye Kısayolları
Ctrl+S ile kaydetme, Ctrl+Z ile geri alma gibi kısayollar:
window.addEventListener('keydown', function(event) {
// Ctrl+S: Kaydet
if (event.ctrlKey && event.code === 'KeyS') {
event.preventDefault(); // Tarayıcının varsayılan davranışını engelle
kaydet();
console.log('Kaydedildi!');
}
// Ctrl+Z: Geri Al
if (event.ctrlKey && event.code === 'KeyZ') {
event.preventDefault();
geriAl();
console.log('Geri alındı!');
}
// Escape: Modal'ı kapat
if (event.code === 'Escape') {
modalKapat();
}
});Modifier Tuşları
| Özellik | Açıklama |
|---|---|
event.ctrlKey | Ctrl tuşu basılı mı? |
event.shiftKey | Shift tuşu basılı mı? |
event.altKey | Alt tuşu basılı mı? |
event.metaKey | Windows/Command tuşu basılı mı? |
window.addEventListener('keydown', function(event) {
if (event.ctrlKey) console.log('Ctrl basılı');
if (event.shiftKey) console.log('Shift basılı');
if (event.altKey) console.log('Alt basılı');
});Gerçek Hayat Örneği: Arama Kutusu (Canlı Arama)
Her tuş vuruşunda arama yapma:
const aramaInput = document.querySelector('#arama');
const sonuclarDiv = document.querySelector('#sonuclar');
aramaInput.addEventListener('keyup', function(event) {
const aramaMetni = this.value.toLowerCase();
// Enter tuşuna basıldıysa form gönder
if (event.key === 'Enter') {
aramaYap(aramaMetni);
return;
}
// Escape tuşuna basıldıysa input'u temizle
if (event.key === 'Escape') {
this.value = '';
sonuclarDiv.innerHTML = '';
return;
}
// Canlı arama önerileri göster
oneriGetir(aramaMetni);
});Gerçek Hayat Örneği: Şifre Gücü Kontrolü
Her tuş vuruşunda şifre gücünü kontrol etme:
const sifreInput = document.querySelector('#sifre');
const gucGostergesi = document.querySelector('#sifre-gucu');
sifreInput.addEventListener('keyup', function() {
const sifre = this.value;
let guc = 0;
if (sifre.length >= 8) guc++;
if (sifre.length >= 12) guc++;
if (/[A-Z]/.test(sifre)) guc++; // Büyük harf var mı
if (/[a-z]/.test(sifre)) guc++; // Küçük harf var mı
if (/[0-9]/.test(sifre)) guc++; // Rakam var mı
if (/[^A-Za-z0-9]/.test(sifre)) guc++; // Özel karakter var mı
const gucMetinleri = ['Çok Zayıf', 'Zayıf', 'Orta', 'İyi', 'Güçlü', 'Çok Güçlü'];
const renkler = ['#e74c3c', '#e67e22', '#f1c40f', '#27ae60', '#2ecc71', '#16a085'];
gucGostergesi.textContent = gucMetinleri[guc] || 'Çok Zayıf';
gucGostergesi.style.color = renkler[guc] || renkler[0];
});Input'ta mı Yoksa Tüm Sayfada mı?
Klavye olaylarını iki farklı yerde dinleyebilirsiniz:
1. Belirli Bir Input'ta
const input = document.querySelector('#benimInput');
input.addEventListener('keydown', function(event) {
console.log('Input içinde tuşa basıldı:', event.key);
});2. Tüm Sayfada (window)
window.addEventListener('keydown', function(event) {
console.log('Sayfanın herhangi bir yerinde tuşa basıldı:', event.key);
});Oyunlar ve global kısayollar için window kullanılır. Form işlemleri için input elementi kullanılır.
Özet
Bu makalede öğrendiklerimiz:
✅ Event Object her olayda otomatik olarak gelir ve olay hakkında bilgi içerir
✅ keydown tuşa basıldığında, keyup tuş bırakıldığında tetiklenir
✅ event.key üretilen karakteri, event.code fiziksel tuşu gösterir
✅ Oyun kontrolleri için event.code kullanılmalı
✅ Kısayollar için ctrlKey, shiftKey, altKey özellikleri kontrol edilmeli
✅ event.preventDefault() tarayıcının varsayılan davranışını engeller
Bir sonraki makalede Form Events ve preventDefault konusunu derinlemesine inceleyeceğiz.
