JavaScript DOM Events: Web Sayfalarına Hayat Veren Olaylar

Web geliştirme dünyasında, kullanıcılarla etkileşim kurabilen dinamik sayfalar oluşturmak istiyorsak DOM Events (DOM Olayları) kavramını mutlaka öğrenmemiz gerekiyor. Düşünün ki bir web sitesi yapıyorsunuz: kullanıcı bir butona tıkladığında sepete ürün eklemek, fare ile bir menünün üzerine geldiğinde alt menüyü göstermek veya bir form gönderildiğinde verileri işlemek istiyorsunuz. İşte tüm bunlar DOM Events sayesinde mümkün oluyor.

DOM Events Nedir?

DOM Events, kullanıcının veya tarayıcının gerçekleştirdiği eylemlere verilen isimdir. Bu olaylar, web sayfamızda "bir şey olduğunda" tetiklenir ve biz bu olaylara JavaScript koduyla tepki verebiliriz.

Yaygın Event Türleri

Gerçek Hayattan Örnekler

Örnek 1: E-Ticaret Sitesi Sepet Butonu

Bir e-ticaret sitesinde "Sepete Ekle" butonuna tıkladığınızda ne olur? JavaScript, bu click olayını yakalar ve:

1. Ürünü sepet listesine ekler
2. Sepet ikonundaki sayıyı günceller
3. Belki küçük bir animasyon gösterir
4. Bazen bir bildirim mesajı çıkarır

// Basit bir sepete ekleme örneği
const sepeteEkleButonu = document.querySelector('.sepete-ekle');

sepeteEkleButonu.addEventListener('click', function() {
    sepetSayisi++;
    sepetIkonu.textContent = sepetSayisi;
    bildirimGoster('Ürün sepete eklendi!');
});

Örnek 2: Arama Kutusu Önerileri

Google veya YouTube'da bir şey yazmaya başladığınızda anında öneriler çıkar, değil mi? Bu, input veya keyup olayları dinlenerek yapılır:

const aramaKutusu = document.querySelector('#arama');

aramaKutusu.addEventListener('input', function() {
    const aramaMetni = aramaKutusu.value;
    // API'den önerileri getir ve göster
    onerileriGetir(aramaMetni);
});

Örnek 3: Resim Galerisi

Bir resim galerisinde küçük resimlerin üzerine geldiğinizde büyük resmin değişmesi mouseover olayı ile sağlanır:

const kucukResimler = document.querySelectorAll('.kucuk-resim');
const buyukResim = document.querySelector('.buyuk-resim');

kucukResimler.forEach(function(resim) {
    resim.addEventListener('mouseover', function() {
        buyukResim.src = resim.dataset.buyukUrl;
    });
});

Örnek 4: Oyun Kontrolleri

Basit bir tarayıcı oyununda karakter kontrolü keydown olayları ile yapılır:

window.addEventListener('keydown', function(event) {
    switch(event.key) {
        case 'ArrowUp':
            karakteriYukariTasi();
            break;
        case 'ArrowDown':
            karakteriAsagiTasi();
            break;
        case 'ArrowLeft':
            karakteriSolaTasi();
            break;
        case 'ArrowRight':
            karakteriSagaTasi();
            break;
        case ' ': // Boşluk tuşu
            zipla();
            break;
    }
});

Örnek 5: Sonsuz Scroll (Infinite Scroll)

Instagram veya Twitter gibi sosyal medya sitelerinde sayfanın sonuna geldiğinizde otomatik olarak yeni içerikler yüklenir. Bu scroll olayı ile yapılır:

window.addEventListener('scroll', function() {
    // Sayfanın sonuna yaklaştık mı kontrol et
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        yeniIcerikleriYukle();
    }
});

Neden Events Önemli?

DOM'u manipüle etmeyi öğrendiğimizde (element oluşturma, silme, stil değiştirme vb.) aslında işin yarısını öğrenmiş oluyoruz. Ama bu işlemleri ne zaman yapacağımızı belirlemek için Events'e ihtiyacımız var.

Şöyle düşünün:

• DOM Manipülasyonu: "Ne yapacağımı biliyorum" (element ekle, sil, değiştir)
• DOM Events: "Ne zaman yapacağımı biliyorum" (tıklandığında, kaydırıldığında, yazıldığında)

Bu ikisi birleştiğinde gerçek anlamda interaktif web uygulamaları ortaya çıkıyor.

Özet

Bu makalede DOM Events kavramına giriş yaptık ve şunları öğrendik:

✅ Events, kullanıcı etkileşimlerine tepki vermemizi sağlar
✅ Farklı event türleri vardır: click, mouseover, keydown, submit, scroll vb.
✅ Events + DOM Manipülasyonu = İnteraktif Web Sayfaları
✅ Her event türünün kendine özgü kullanım alanları vardır

Bir sonraki makalede, JavaScript'te event'leri dinlemenin farklı yollarını ve en iyi pratikleri inceleyeceğiz.