Bir önceki makalede DOM Events'in ne olduğunu ve neden önemli olduğunu öğrendik. Şimdi sıra geldi bu olayları nasıl dinleyeceğimize. JavaScript'te event'leri dinlemenin üç farklı yolu var ve bu makalede hepsini inceleyeceğiz. Spoiler: Sadece birini kullanmanızı önereceğim!
Yöntem 1: Inline Event Handlers (HTML İçinde)
Bu yöntem, event handler'ı doğrudan HTML elementinin içine yazmaktır. En eski ve en önerilmeyen yöntemdir.
Nasıl Çalışır?
<button onclick="alert('Merhaba!')">Tıkla Beni</button>Gerçek Hayat Örneği: Hesap Makinesi Butonları
<div class="hesap-makinesi">
<button onclick="sayiyiEkle(1)">1</button>
<button onclick="sayiyiEkle(2)">2</button>
<button onclick="sayiyiEkle(3)">3</button>
<button onclick="topla()">+</button>
<button onclick="sonucuGoster()">=</button>
</div>Bu Yöntemin Dezavantajları
❌ HTML ve JavaScript karışıyor: Kodunuz dağınık ve okunması zor hale geliyor.
❌ Tırnak işareti karmaşası: JavaScript kodunu HTML attribute'u içinde yazarken tırnak işaretlerine dikkat etmeniz gerekiyor.
<!-- Bu çok karışık görünüyor! -->
<button onclick="mesajGoster('Merhaba'); alert('İkinci mesaj')">Tıkla</button>❌ Kod tekrarı: Aynı işlevi yapan 10 butonunuz varsa, hepsine aynı kodu yapıştırmanız gerekir.
<!-- 10 buton için 10 kez aynı şeyi yazmak mı? Hayır! -->
<button onclick="urunuSil(1)">Sil</button>
<button onclick="urunuSil(2)">Sil</button>
<button onclick="urunuSil(3)">Sil</button>
<!-- ... ve böyle devam ediyor -->❌ Güvenlik riski: Kötü niyetli kullanıcılar XSS saldırıları yapabilir.
Yöntem 2: onclick Property (JavaScript'te)
Bu yöntem biraz daha iyi. JavaScript dosyamızda elementi seçip, onclick özelliğine bir fonksiyon atıyoruz.
Nasıl Çalışır?
const buton = document.querySelector('#benimButon');
buton.onclick = function() {
console.log('Butona tıklandı!');
};Gerçek Hayat Örneği: Tema Değiştirici
const temaButonu = document.querySelector('.tema-degistir');
const sayfa = document.body;
temaButonu.onclick = function() {
if (sayfa.classList.contains('karanlik-tema')) {
sayfa.classList.remove('karanlik-tema');
sayfa.classList.add('aydinlik-tema');
temaButonu.textContent = '🌙 Karanlık Mod';
} else {
sayfa.classList.remove('aydinlik-tema');
sayfa.classList.add('karanlik-tema');
temaButonu.textContent = '☀️ Aydınlık Mod';
}
};Önceden Tanımlı Fonksiyon Kullanma
Fonksiyonu ayrı tanımlayıp atayabiliriz:
function selamVer() {
console.log('Merhaba!');
console.log('Nasılsınız?');
}
const buton = document.querySelector('#selamButonu');
buton.onclick = selamVer; // Dikkat: selamVer() değil, selamVer⚠️ Önemli: Fonksiyonu atarken parantez kullanmıyoruz!
selamVer()yazarsak fonksiyon hemen çalışır,selamVeryazarsak sadece referansını atamış oluruz.
Bu Yöntemin Problemi: Tek Event Handler Sınırı
const buton = document.querySelector('#ozelButon');
// İlk handler
buton.onclick = function() {
console.log('Birinci işlem');
};
// İkinci handler - BU BİRİNCİYİ EZİYOR!
buton.onclick = function() {
console.log('İkinci işlem');
};
// Tıklandığında sadece "İkinci işlem" yazılır!Bu, normal bir JavaScript objesi gibi düşünün:
const araba = { renk: 'mavi' };
araba.renk = 'kırmızı';
// Artık araba.renk sadece 'kırmızı', 'mavi' kayboldu!Yöntem 3: addEventListener (En İyi Yöntem) ⭐
Bu, modern JavaScript'te event'leri dinlemenin standart ve önerilen yoludur.
Nasıl Çalışır?
const buton = document.querySelector('#benimButon');
buton.addEventListener('click', function() {
console.log('Butona tıklandı!');
});Sözdizimi
element.addEventListener('eventTürü', callbackFonksiyonu);- eventTürü: Dinlemek istediğimiz olayın adı (string olarak)
- callbackFonksiyonu: Olay gerçekleştiğinde çalışacak fonksiyon
Gerçek Hayat Örneği: Sosyal Medya Beğeni Butonu
const begeniButonu = document.querySelector('.begeni-btn');
const begeniSayisi = document.querySelector('.begeni-sayisi');
let sayi = 0;
begeniButonu.addEventListener('click', function() {
sayi++;
begeniSayisi.textContent = sayi;
begeniButonu.classList.add('begenildi');
// Küçük bir animasyon efekti
begeniButonu.style.transform = 'scale(1.2)';
setTimeout(function() {
begeniButonu.style.transform = 'scale(1)';
}, 200);
});Avantaj 1: Birden Fazla Event Handler
const kaydetButonu = document.querySelector('#kaydet');
// İlk handler
kaydetButonu.addEventListener('click', function() {
verileriKaydet();
});
// İkinci handler - BU İLKİNİ EZMİYOR!
kaydetButonu.addEventListener('click', function() {
bildirimGoster('Kaydedildi!');
});
// Üçüncü handler
kaydetButonu.addEventListener('click', function() {
analizGonder('kaydet_butonu_tiklandi');
});
// Tıklandığında ÜÇÜ DE çalışır!Avantaj 2: Farklı Event Türleri
const kart = document.querySelector('.urun-karti');
// Fare üzerine gelince
kart.addEventListener('mouseenter', function() {
kart.classList.add('vurgulu');
});
// Fare ayrılınca
kart.addEventListener('mouseleave', function() {
kart.classList.remove('vurgulu');
});
// Çift tıklanınca
kart.addEventListener('dblclick', function() {
favorilereEkle();
});Avantaj 3: Ek Seçenekler
addEventListener üçüncü bir parametre olarak seçenekler alabilir:
// Sadece bir kez çalışsın
buton.addEventListener('click', function() {
console.log('Bu sadece bir kez yazılacak!');
}, { once: true });// İlk tıklamada çalışır, sonra otomatik olarak kaldırılır
const tekKullanim = document.querySelector('#tek-kullanim');
tekKullanim.addEventListener('click', function() {
alert('Tebrikler! Kuponunuz aktif edildi.');
tekKullanim.disabled = true;
tekKullanim.textContent = 'Kullanıldı';
}, { once: true });Avantaj 4: Event Listener'ı Kaldırabilme
function tiklamaHandler() {
console.log('Tıklandı!');
}
// Ekle
buton.addEventListener('click', tiklamaHandler);
// Sonra kaldır
buton.removeEventListener('click', tiklamaHandler);Karşılaştırma Tablosu
| Özellik | Inline | onclick | addEventListener |
|---|---|---|---|
| HTML'den ayrı | ❌ | ✅ | ✅ |
| Birden fazla handler | ❌ | ❌ | ✅ |
| Handler kaldırabilme | ❌ | ❌ | ✅ |
| Ek seçenekler | ❌ | ❌ | ✅ |
| Önerilen | ❌ | ❌ | ✅ |
Pratik Örnek: Tüm Butonlara Event Ekleme
// Sayfadaki tüm "silme" butonlarını seç
const silmeButonlari = document.querySelectorAll('.sil-btn');
// Her birine tıklama event'i ekle
silmeButonlari.forEach(function(buton) {
buton.addEventListener('click', function() {
const satirId = buton.dataset.id;
satirSil(satirId);
});
});Özet
Bu makalede üç farklı event dinleme yöntemini öğrendik:
| Yöntem | Öneri |
|---|---|
| Inline Events | ❌ Kullanmayın |
| onclick Property | ⚠️ Mümkünse kaçının |
| addEventListener | ✅ Her zaman bunu kullanın |
Neden addEventListener?
- Birden fazla handler ekleyebilirsiniz
- Handler'ları kaldırabilirsiniz
- Ek seçenekler kullanabilirsiniz
- Kod daha temiz ve bakımı kolay olur
- Endüstri standardıdır
Bir sonraki makalede this anahtar kelimesinin event handler'larda nasıl çalıştığını inceleyeceğiz.
