Event Listener Örnekleri: Click, Hover ve Klavye Etkinlikleri

Giriş — event listener nedir?

Web sayfalarında kullanıcı etkileşimlerini (tıklama, fare hareketi, tuş basımı vb.) dinlemek için JavaScript'te addEventListener() metodu kullanılır. Bu metot, belirli bir DOM öğesine (veya belgeye) bir olay türü (örneğin 'click' veya 'keydown') ve olay gerçekleştiğinde çalışacak bir geri çağırma (callback) atamanıza imkân verir. Daha ayrıntılı teknik açıklamalar ve tarayıcı uyumluluğu için MDN dokümantasyonuna bakabilirsiniz: MDN — Introduction to events.

Temel sözdizimi

addEventListener üç parametre alır: olay adı, callback ve isteğe bağlı seçenekler. Basit kullanım şu şekildedir:

Genel yapı
element.addEventListener('eventName', eventHandler);

Click (tık) etkinliği örnekleri

Click olayları en yaygın interaksiyonlardan biridir. Aşağıda sıfırdan bir örnek ve daha ileri teknikler yer alıyor.

Örnek 1 — Sayfa arka planını rastgele renge çeviren buton

HTML (kısa gösterim):
<button id="colorBtn">Renk Değiştir</button>

JavaScript (özet)
const btn = document.querySelector('#colorBtn');
function randomColor() {
  return Math.floor(Math.random() * 256);
}
btn.addEventListener('click', () => {
  const color = `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
  document.body.style.backgroundColor = color;
});

Bu örnek, MDN'deki temel kullanıma paralel bir uygulamadır: bir öğe seçilir ve tıklandığında callback çalışır.

Örnek 2 — Event delegation: çok sayıda düğme için tek dinleyici

Bir listede veya kart grubunda her düğme için ayrı dinleyici eklemek yerine, ortak ebeveyn üzerinde tek bir dinleyici kullanmak performans açısından avantajlıdır.

JavaScript (özet)
const container = document.querySelector('#buttons');
container.addEventListener('click', (e) => {
  const button = e.target.closest('button');
  if (!button) return; // butona tıklanmadıysa çık
  console.log('Tıklanan buton id:', button.id);
});

Örnek 3 — preventDefault ve stopPropagation

Bir bağlantının varsayılan davranışını engellemek veya bir olayın daha yukarıya yayılmasını durdurmak gerektiğinde ilgili yöntemleri kullanabilirsiniz.

JavaScript (özet)
const link = document.querySelector('a.example');
link.addEventListener('click', (e) => {
  e.preventDefault(); // bağlantının gezintisini durdurur
  console.log('Linkin default davranışı iptal edildi.');
});

Hover (fare ile üzerine gelme) etkinlikleri

Fare olayları için yaygın kullanılan olaylar: mouseenter, mouseleave, mouseover ve mouseout. Önemli farklardan biri, mouseover/mouseout olaylarının yayılma (bubbling) davranışı göstermesi; mouseenter/mouseleave ise bu şekilde yayılmaz. Bu davranışların detayları MDN'de açıklanmıştır.

Örnek — mouseenter / mouseleave ile görsel vurgu

JavaScript (özet)
const el = document.querySelector('.hover-target');
el.addEventListener('mouseenter', () => {
  el.style.backgroundColor = 'lightblue';
});
el.addEventListener('mouseleave', () => {
  el.style.backgroundColor = '';
});

Bu yaklaşım, alt öğelere girip çıkıldığında tekrarlı tetiklemeler istemediğiniz durumlarda faydalıdır.

Klavye (keyboard) etkinlikleri

Klavye olayları genelde belge veya belirli bir odaklanmış öğe üzerine yerleştirilir. Sık kullanılan olaylar: keydown, keyup. Olay nesnesinde event.key ile hangi tuşun basıldığını okuyabilirsiniz.

Örnek — Escape tuşuyla modal kapatma

JavaScript (özet)
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Odak yönetimi ve erişilebilirlik için interaktif öğelerin (buton, link) yerel davranışlarını tercih etmek ve kullanıcıların klavye ile ulaşabilmesini sağlamak önemlidir.

addEventListener seçenekleri ve removeEventListener

Üçüncü parametre olarak bir seçenek nesnesi verebilirsiniz. Örnek seçenekler: once (listener tek seferlik çalışsın), passive (tarayıcı optimizasyonu için), capture (capture fazında dinleme). Örnek:

element.addEventListener('scroll', handler, { passive: true });

removeEventListener, aynı referanslı fonksiyonla dinleyiciyi kaldırmak için kullanılır. Bu yüzden anonim fonksiyon yerine adlandırılmış fonksiyon tercih etmek iyi pratiktir.

Örnek
function onClick(e) { console.log('tık'); }
btn.addEventListener('click', onClick);
// Daha sonra kaldırmak için: btn.removeEventListener('click', onClick);

Performans ve erişilebilirlik için pratik ipuçları

• Küçük öğe grupları yerine çok sayıda benzer öğe için event delegation kullanın.
• Dinleme gerekmeyen durumlarda listener eklemeyin veya kaldırın; gereksiz dinleyiciler performansı etkileyebilir.
• İnteraktif öğeleri semantik HTML (button, a) ile oluşturun; bu, klavye ve ekran okuyucu desteğini artırır.
• Varsayılan davranışları iptal ederken (e.preventDefault()) erişilebilirliği bozmadığınızdan emin olun.
• Kaynak dökümantasyon ve tarayıcı farklılıkları için MDN'i referans alın: MDN Events.

Adım adım kısa uygulama: sayaç (click + klavye)

Bu örnek, bir butona tıklayarak ve klavyeden ok tuşuyla artırılan basit bir sayacı gösterir.

HTML (özet)
<button id="inc">Arttır</button> <span id="count">0</span>

JavaScript (özet)
const inc = document.getElementById('inc');
const display = document.getElementById('count');
let count = 0;
inc.addEventListener('click', () => {
  count += 1;
  display.textContent = count;
});
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    count += 1;
    display.textContent = count;
  }
});

Bu küçük kombinasyon, farklı olay türlerini nasıl birlikte kullanabileceğinize dair pratik bir örnektir.

Hızlı kontrol listesi (checklist)

• Doğru DOM öğesini seçtiğinizden emin olun (querySelector/getElementById).
• Aynı olaya birden fazla kez aynı anonim fonksiyonla bağlama; gerektiğinde adlandırılmış fonksiyon tercih edin.
• Çok sayıda benzer öğe varsa event delegation düşünün.
• Klavye ile erişilebilirliği test edin (tab sırası, Enter/Escape davranışları).
• Tarayıcıların olay davranışları ve API seçenekleri için MDN dokümantasyonunu kontrol edin.

Kaynak

Bu yazıda yer alan temel kavramlar ve örneklerin dayandığı referans: MDN — Introduction to events.

Notlar ve sınırlamalar

Buradaki kod örnekleri öğretici amaçlıdır. Üretim ortamında tarayıcı uyumluluğu, performans testleri ve güvenlik gereksinimlerini ayrıca değerlendirmeniz önerilir. Detaylı teknik tanımlar ve ek örnekler için MDN kaynağını inceleyin.