JS Event Listener Örnekleri: Click, Hover ve Delegation

JS Event Listener Örnekleri: Click, Hover ve Delegation

Bu rehber, "javascript başlangıç kodları" arayan geliştiriciler için addEventListener kullanımını; click, hover ve event delegation örneklerini adım adım açıklar. Ayrıca preventDefault() ve stopPropagation() gibi yaygın yöntemlerin ne zaman ve nasıl kullanılacağını gösterir.

Temel: addEventListener nasıl çalışır?

DOM elementlerine olay dinleyicisi eklemenin modern yolu addEventListener'dır. Temel kullanım şu şekildedir:

document.querySelector('#btn').addEventListener('click', function(event) {
alert('Butona tıklandı');
});

Burada event nesnesi olayla ilgili bilgileri taşır; örneğin event.target, hangi elementin olayı tetiklediğini gösterir. (Kod parçaları örnek amaçlıdır; gerçek projede seçicilerin doğru olduğundan emin olun.)

Click olayları: örnekler ve sık yapılan işler

Buton veya bağlantı tıklamalarına tepki vermek için click kullanılır. Aşağıdaki örnek, bir linkin varsayılan davranışını engelleyip kendi mantığını çalıştırır:

<a href="https://example.com" id="myLink">Dışarı git</a>

document.querySelector('#myLink').addEventListener('click', function(e) {
e.preventDefault();
// Kendi mantığınızı çalıştırın
console.log('Link tıklaması engellendi, uygulama mantığı çalıştı');
});

preventDefault() yöntemi, olayın tarayıcı tarafından yapılan varsayılan davranışını engeller; örneğin linkin navigasyonunu durdurur. Daha fazla bilgi için MDN sayfasına bakabilirsiniz: preventDefault() — MDN (kaynak: MDN).

Hover olayları: CSS mi, JavaScript mi?

Basit görsel değişiklikler için CSS :hover kullanmak genellikle daha performanslı ve kolaydır. JavaScript ile kontrol gerekiyorsa mouseenter / mouseleave ya da mouseover / mouseout olayları tercih edilebilir.

/* CSS ile */
.button:hover {
background: #0077cc;
color: #fff;
}

/* JavaScript ile (örnek) */
document.querySelector('.button').addEventListener('mouseenter', function() {
this.classList.add('hovered');
});
document.querySelector('.button').addEventListener('mouseleave', function() {
this.classList.remove('hovered');
});

CSS çözümü basit etkileşimler için tercih edilir; JavaScript ise durum yönetimi, animasyon tetikleme veya özel mantık gerektiğinde kullanılmalıdır.

Event Delegation (Olay Delege Etme): Neden ve nasıl?

Event delegation, benzer davranışa sahip birçok alt elemana ayrı ayrı dinleyici eklemek yerine ortak bir üst elemente tek bir dinleyici ekleyerek olayları yönetme tekniğidir. Bu yaklaşım genellikle dinleyici sayısını azaltarak kaynak kullanımını iyileştirir ve dinamik olarak eklenen elemanlarla daha uyumludur.

<ul id="todo">
<li data-id="1">Görev 1</li>
<li data-id="2">Görev 2</li>
<li data-id="3">Görev 3</li>
</ul>

document.querySelector('#todo').addEventListener('click', function(e) {
const li = e.target.closest('li');
if (!li) return; // boş alana tıklanmış olabilir
console.log('Tıklanan görev id:', li.dataset.id);
});

Üst elementte tek bir listener tutarak hem performans kazanırsınız hem de listeye sonradan eklenen öğeleri ayrıca dinleyici atamak zorunda kalmazsınız. Event delegation hakkında temel kavramlar için MDN dokümanları yararlı olabilir: MDN Event dökümantasyonu.

stopPropagation ve preventDefault: Aralarındaki fark

İki sık kullanılan yöntem şunlardır:

• preventDefault(): Olayın tarayıcı tarafından yapılan varsayılan davranışını durdurur (ör. link navigasyonu, form submit).
• stopPropagation(): Olayın DOM'da daha fazla yayılmasını (bubbling/capturing) engeller; yani üst elementlerin olay dinleyicilerine ulaşmaz. Detaylı açıklama için MDN: stopPropagation() — MDN.

/* stopPropagation örneği */
<div id="outer">
<button id="inner">Tıkla</button>
</div>

document.querySelector('#outer').addEventListener('click', function() {
console.log('Outer tıklandı');
});
document.querySelector('#inner').addEventListener('click', function(e) {
e.stopPropagation();
console.log('Inner tıklandı, dışa yayılma durduruldu');
});

Yukarıdaki örnekte inner butona tıklandığında outer listener tetiklenmez çünkü stopPropagation() çağrılmıştır. Hangi yöntemi kullanacağınız uygulamanın davranış gereksinimlerine bağlıdır.

Pratik ipuçları ve kontrol listesi

• Stil değişiklikleri için öncelikle CSS :hover kullanın; JavaScript yalnızca mantık gerektiğinde olsun.
• Benzer öğeler için event delegation tercih edin; dinleyici sayısını azaltır ve dinamik DOM ile iyi çalışır.
• Form submit veya link navigasyonu önlemek için e.preventDefault() kullanın; kaynak: preventDefault() — MDN.
• Bir olayın üst öğelere ulaşmasını istemiyorsanız e.stopPropagation() kullanın; kaynak: stopPropagation() — MDN.
• Dinleyiciyi gerektiğinde kaldırmayı unutmayın (ör. removeEventListener) ve bellek kullanımına dikkat edin.
• Olayları debug etmek için event nesnesini console.log ile inceleyin (event.target, event.currentTarget, vb.).

Hızlı Başlat: Özet Kod Paketi

/* Click */
document.querySelector('#btn').addEventListener('click', e => {
console.log('Buton tıklandı');
});

/* Hover (JS) */
const btn = document.querySelector('.button');
btn.addEventListener('mouseenter', () => btn.classList.add('hovered'));
btn.addEventListener('mouseleave', () => btn.classList.remove('hovered'));

/* Delegation */
document.querySelector('#list').addEventListener('click', e => {
const item = e.target.closest('li');
if (item) console.log('Tıklanan:', item.textContent.trim());
});

Sonuç ve kaynaklar

Bu rehber temel addEventListener örnekleri, hover kontrolü ve event delegation uygulamalarını gösterir. Örnek kodları kendi projenizde deneyin ve farklı tarayıcılarda test edin. Prevent ve propagation davranışlarıyla ilgili resmi açıklamalar için MDN dokümanlarını incelemeniz faydalı olacaktır:

• preventDefault() — MDN
• stopPropagation() — MDN

Uygulama sırasında belirsiz bir davranışla karşılaşırsanız, olay nesnesinin içeriğini konsola yazdırmak ve küçük izolasyon testleri yapmak hızlı bir yol sağlar.