JS Event Listener Örnekleri: Click, Hover ve Form Submit

JS Event Listener Örnekleri: Click, Hover ve Form Submit

Bu rehberde JavaScript'te kullanıcı etkileşimlerini yönetmek için yaygın olarak kullanılan addEventListener() örneklerini (tıklama, fareyle üzerine gelme ve form gönderimi) pratik kodlarla göreceksiniz. addEventListener metodunun çalışma mantığı ve temel kullanımına dair resmi dokümanlara bakmak isterseniz Codecademy ve W3Schools'un açıklamaları yararlı olacaktır: Codecademy – addEventListener, W3Schools – EventListener.

addEventListener temelleri

addEventListener üç ana parametre alır: olay türü (ör. "click", "submit"), dinleyici işlevi (callback) ve isteğe bağlı bir seçenekler argümanı. Bu metot aynı elemente birden fazla dinleyici eklemenize olanak verir; böylece mevcut dinleyiciler silinmeden yeni davranışlar ekleyebilirsiniz (daha fazla bilgi için Codecademy dokümanına bakabilirsiniz).

• event type: 'click', 'submit', 'mouseenter' gibi string.
• listener: event nesnesini parametre alan bir fonksiyon (örn. function(event) { ... }).
• options (isteğe bağlı): boolean ya da obje; sık kullanılan seçenekler: once (bir kez çalıştır), capture, passive.

1) Click (tıklama) örnekleri

Basit bir tıklama dinleyicisi eklemek için en temel yol aşağıdaki gibidir:

Örnek — Tek buton:
const button = document.getElementById('myBtn');
button.addEventListener('click', (event) => {
console.log('Butona tıklandı');
});

Bir sayfada birden çok benzer eleman varsa querySelectorAll ile topluca dinleyici eklemek pratiktir:

Örnek — Birden çok buton:
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = e.currentTarget.dataset.id; // data-id kullanımı
console.log('Buton id:', id);
});
});

Olay nesnesinde sık kullanılan iki alan event.target (olayı tetikleyen gerçek element) ve event.currentTarget (dinleyicinin bağlı olduğu element)dir. Dinamik olarak üretilen elemanlar için çok sayıda dinleyici eklemek yerine olay delegasyonu tercih edilebilir:

Örnek — Olay delegasyonu (performans ve dinamik içerik için):
const list = document.getElementById('list');
list.addEventListener('click', (e) => {
const item = e.target.closest('.item');
if (!item) return; // listede olmayan yerlere tıklanmışsa çık
console.log('Öğe tıklandı:', item.dataset.id);
});

Click olaylarıyla ilgili temel kullanım ve örnekler için W3Schools sayfası faydalıdır: W3Schools EventListener.

2) Hover (fareyle üzerine gelme) örnekleri

Fareyle üzerine gelme etkileşimleri için iki çift olay sık kullanılır: mouseenter / mouseleave ve mouseover / mouseout. Aralarındaki farklar vardır; örneğin mouseenter, içerideki çocuk elementlere geçişte yeniden tetiklenmezken mouseover tetiklenebilir. Stack Overflow'da bu ayrım ve kullanıma dair tartışmalar bulunabilir: Stack Overflow – mouseenter / mouseleave tartışması.

Örnek — mouseenter / mouseleave ile sınıf ekleme:
const card = document.querySelector('.card');
card.addEventListener('mouseenter', () => card.classList.add('is-hovered'));
card.addEventListener('mouseleave', () => card.classList.remove('is-hovered'));

Basit stil değişiklikleri için CSS :hover kullanmak daha basit ve performanslıdır, ancak JavaScript ile animasyon, dinamik veri yükleme veya erişilebilirlik uyarlamaları gerektiğinde mouseenter/mouseleave tercih edilebilir. Mobil ve dokunmatik cihazlarda hover davranışı bulunmadığını unutmayın; bu nedenle etkileşimleri klavye ve dokunmatik destekle test etmek önemlidir.

3) Form submit örnekleri

Form gönderimlerini JavaScript ile kontrol ederken en yaygın adım submit olayını yakalayıp varsayılan davranışı event.preventDefault() ile engellemektir. Bu sayede form verilerini doğrulayabilir, AJAX ile gönderebilir veya kullanıcıya geri bildirim gösterebilirsiniz. MDN'in submit olayı dökümantasyonu bu konuda ayrıntılı bilgi sağlar: MDN – HTMLFormElement: submit event.

Örnek — Form gönderimini JS ile yakalamak ve FormData kullanmak:
const form = document.getElementById('contactForm');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const fd = new FormData(event.target);
const payload = Object.fromEntries(fd.entries());
// Basit doğrulama
if (!payload.name) {
console.log('İsim gerekli');
return;
}
try {
const res = await fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const data = await res.json();
console.log('Sunucu yanıtı:', data);
} catch (err) {
console.error(err);
}
});

Form doğrulama için HTML5 validation API (checkValidity, setCustomValidity) ile kombinasyon yapmak sık kullanılan bir yaklaşımdır. Sunucu tarafı doğrulama her zaman gereklidir; istemci tarafı doğrulama kullanıcı deneyimini artırmak içindir.

removeEventListener ve seçenekler

Bir dinleyiciyi kaldırmak istiyorsanız removeEventListener kullanılır; burada dikkat edilmesi gereken nokta aynı fonksiyon referansını vermektir (aynı anonim fonksiyon çalışmaz). Örnek:

function onClick(e) { console.log('clicked'); }
button.addEventListener('click', onClick);
// Daha sonra
button.removeEventListener('click', onClick);

Ayrıca addEventListener'da { once: true } gibi seçeneklerle dinleyicinin tek seferlik çalışmasını sağlayabilirsiniz:

button.addEventListener('click', onClick, { once: true });

Pratik ipuçları ve hata ayıklama

• Script'in DOM yüklendikten sonra çalıştığından emin olun. Ya script'i <body> sonunda çağırın ya da DOMContentLoaded dinleyin.
• Dinleyiciyi kaldırmayı planlıyorsanız anonim fonksiyon yerine isimli fonksiyon kullanın.
• Çok sayıda benzer eleman varsa delegasyon düşünün; bu bellek ve performans açısından iyileştirir.
• console.log ve tarayıcı DevTools breakpoint'leri hızlıca problemi bulmak için etkilidir.
• Mobil/dokunmatik cihazlarda hover davranışının farklı olduğunu test edin; gerektiğinde dokunma-dostu alternatifler sağlayın.

Erişilebilirlik (Accessibility) notları

İnteraktif öğeler için klavye erişimini unutmayın: tıklanabilir bir div yerine button elementini tercih etmek, uygun ARIA rolleri eklemek ve klavye etkinliklerini (örn. keydown ile Enter/Space) desteklemek genellikle daha iyidir. Bu sayede fare kullanamayan kullanıcılar da etkileşime erişebilir.

Kullanıma Hazır Kontrol Listesi

1. Doğru elementi seçtiğinizden emin olun (getElementById, querySelector).
2. Dinleyiciyi DOM yüklendikten sonra ekleyin.
3. Gerekliyse event.preventDefault() ile varsayılan davranışı kontrol edin.
4. Performans için delegasyonu değerlendirin.
5. Erişilebilirlik ve klavye desteğini test edin.
6. Hata durumlarında kullanıcıya geri bildirim sağlayın ve sunucu tarafı doğrulamayı uygulayın.

Daha fazla okuma için kaynaklar: Codecademy addEventListener, W3Schools EventListener, MDN submit event, Stack Overflow mouseenter/mouseleave.

Bu rehber temel örnekler içerir; projenizin karmaşıklığına göre uygulamada ek güvenlik, erişilebilirlik ve performans önlemleri gerekebilir.