Giriş

Web sayfaları kullanıcı etkileşimlerine tepki vererek dinamik hâle gelir. JavaScript'te bu etkileşimleri yakalamanın en yaygın yolu addEventListener kullanmaktır. Aşağıdaki örnekler temel kavramları (click, input, hover), event object kullanımı, preventDefault ve basit bir debounce uygulamasını kapsar. Daha fazla teknik referans için W3Schools: EventListener ve Techkiz: Events Basics sayfalarına bakabilirsiniz.

Temel kavramlar

addEventListener bir öğeye (element) belirli bir olay (event) gerçekleştiğinde çalışacak fonksiyon ekler. Eklenen fonksiyon, tarayıcı tarafından bir event object ile çağrılır; bu obje event tipi, hedef element (event.target) ve preventDefault gibi metotları içerir. Bu temel davranışlar tarayıcı dokümantasyonlarında açıklanır (ör. W3Schools).

Kısa referans tablosu

Örnek 1 — click eventi (temel kullanım ve removeEventListener)

Aşağıda bir buton için basit bir click örneği var. HTML etiketleri kod olarak gösterilmiştir.

<button id="myBtn">Tıkla</button>
const btn = document.getElementById('myBtn');
function handleClick(event) {
console.log('Butona tıklandı:', event.type);
console.log('Hedef element:', event.target);
}
btn.addEventListener('click', handleClick);
// Gerekirse kaldırmak için:
// btn.removeEventListener('click', handleClick);

Bu örnekte event.type ve event.target ile hangi eventin ve hangi öğenin tetiklendiğini öğrenebilirsiniz. Tek seferlik dinleyici eklemek isterseniz addEventListener'a options olarak { once: true } verebilirsiniz (tarayıcı desteğine dikkat edin).

Örnek 2 — input eventi ve debounce (performans için)

Arama alanı gibi sık tetiklenen input olaylarında debounce kullanmak performansı arttırır. Debounce, işlemi son tetiklemeden belirli bir süre sonra çalıştırır; böylece gereksiz birkaç çağrı engellenir. Aşağıda basit bir debounce fonksiyonu ve uygulaması var.

<input id="search" placeholder="Ara...">
function debounce(fn, delay) {
let timer = null;
return function(...args) {
const ctx = this;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(ctx, args);
}, delay);
}
}
const search = document.getElementById('search');
function onSearch(e) {
console.log('Arama değeri:', e.target.value);
// API çağrısı veya filtreleme işlemi burada yapılır
}
search.addEventListener('input', debounce(onSearch, 300));

Debounce ile API çağrılarınızı veya yoğun hesaplamaları azaltabilirsiniz. Debounce ve throttle arasındaki farklar için daha detaylı teknik rehberlere bakabilirsiniz.

Örnek 3 — hover (mouseover / mouseout ve mouseenter / mouseleave)

Hover efektlerinde genellikle mouseover / mouseout veya mouseenter / mouseleave kullanılır. Farklılık: mouseenter/mouseleave olayları alt öğelerden etkilenmez, mouseover/mouseout ise bubbling (kabarcıklanma) davranışı gösterir.

<div id="card">Fareyi buraya getir</div>
const card = document.getElementById('card');
card.addEventListener('mouseover', function(e) {
e.currentTarget.style.backgroundColor = '#f0f8ff';
});
card.addEventListener('mouseout', function(e) {
e.currentTarget.style.backgroundColor = '';
});

Stil değişikliklerini doğrudan JavaScript ile yapabileceğiniz gibi, erişilebilirlik ve bakım için sınıf (class) ekleyip CSS ile yönetmek genellikle daha uygundur.

Form submit ve preventDefault

Form gönderiminde varsayılan davranışı engelleyip özel doğrulama yapmak isterseniz event.preventDefault() kullanılır:

<form id="form">
<input name="email" type="email" required>
<button type="submit">Gönder</button>
</form>
const form = document.getElementById('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // Formun varsayılan submit davranışını durdurur
// Özel doğrulama ve AJAX çağrısı burada yapılır
console.log('Form gönderimi yakalandı');
});

preventDefault form davranışını durdurur; kullanırken kullanıcı deneyimini bozmayacak şekilde açık mesajlar gösterin ve gerektiğinde geri bildirim sağlayın.

Event delegation (olay delegasyonu) ve large-list performansı

Çok sayıda öğe için ayrı ayrı listener eklemek yerine üst kapsayıcıya listener ekleyip event.target kontrolü yapmak daha verimlidir. Örnek:

<ul id="list">
<li data-id="1">Öğe 1</li>
<li data-id="2">Öğe 2</li>
<!-- Dinamik olarak eklenenleri de kapsar -->
</ul>
const list = document.getElementById('list');
list.addEventListener('click', function(e) {
const item = e.target.closest('li');
if (!item) return;
console.log('Tıklanan öğe id:', item.dataset.id);
});

İyi uygulamalar ve erişilebilirlik

• Buton benzeri etkileşimler için <button> kullanın; aksi hâlde tabindex ve role ekleyin.
• Klavyeyle erişim için keydown veya keyup olaylarını düşünün (ör. Enter ile tetikleme).
• Dinleyicileri gereksiz yere tekrar eklemekten kaçının; gerektiğinde removeEventListener veya { once: true } kullanın.
• Performans-sensitive olaylarda (scroll, resize) passive veya debounce/throttle uygulamalarını değerlendirin.

Hata ayıklama checklist

1. Seçicinizin doğru öğeyi seçtiğinden emin olun (document.querySelector / getElementById).
2. Script'in DOM yüklendikten sonra çalıştığını doğrulayın (defer, DOMContentLoaded veya script tag'ını body sonuna koyun).
3. Event tipi doğru mu? (click vs. mousedown gibi farklar olabilir).
4. console.log ile event objesini inceleyin: event.type, event.target, event.currentTarget.
5. removeEventListener kullanıyorsanız referanslı aynı fonksiyonu verin (anonim fonksiyonlar ayrı kabul edilir).

Kaynak ve ileri okumalar

addEventListener ve event object ile ilgili temel dokümantasyon için W3Schools - EventListener ve event temelleri için Techkiz - Events Basics iyi başlangıç noktalarıdır. Pratik ek örnekler için Live HTML Viewer: How to Add an Event Listener sayfasına bakabilirsiniz.

Özet: addEventListener ile click, input ve hover gibi olayları yakalamak, event object üzerinden bilgi almak, preventDefault ile varsayılan davranışı kontrol etmek ve debounce ile sık olayları yönetmek front-end geliştirmenin temel becerilerindendir. Yukarıdaki örnekleri kendi projelerinizde test ederek öğrenebilirsiniz.