JavaScript Olaylar (Events) ve DOM ile Çalışmak

Web sayfalarında etkileşim; tıklama, klavye girişi, form gönderme veya sayfa yüklenmesi gibi event (olaylar) ile yönetilir. JavaScript, bu olayları yakalamak için DOM (Document Object Model) nesnelerini kullanır.

Kısa Özet
Element Seç: document.querySelector(".sinif")
Olay Bağla: element.addEventListener("click", fonksiyon)
Davranışı Engelle: event.preventDefault()

1) DOM Seçiciler ve Eleman Erişimi

Bir HTML elemanına müdahale edebilmek için önce onu JavaScript tarafında seçmemiz gerekir:

  • document.getElementById("id"): ID üzerinden hızlı seçim.
  • document.querySelector(".sinif"): CSS seçici mantığıyla (id, class, etiket) en modern seçim yöntemi.

2) Olayları Yönetmek: addEventListener

Modern JavaScript'te olayları yönetmenin en doğru yolu addEventListener kullanmaktır. Bu yöntem, bir elemana birden fazla olay bağlamanıza olanak tanır.

JavaScript Event & DOM Example 
// 1. Elemanı seçelim
const buton = document.querySelector("#btnTikla");
const sonuc = document.querySelector("#sonucAlani");

// 2. Tıklama olayını dinleyelim
buton.addEventListener("click", function(event) {
    // HTML içeriğini ve stilini değiştirelim
    sonuc.textContent = "Butona tıklandı ve DOM güncellendi!";
    sonuc.style.color = "green";
    
    console.log("Olay tipi: " + event.type);
});

Sık Kullanılan Olay Tipleri

Kategori Olay (Event) Açıklama
Fare click, dblclick, mouseover Tıklama, çift tıklama ve üzerine gelme.
Klavye keydown, keyup Tuşa basma ve tuşu bırakma.
Form submit, change, focus Gönderme, değer değişimi ve odaklanma.
⚠️ Önemli Hata Notu: Eğer script etiketiniz sayfanın üst kısmındaysa (head içinde), DOM elemanları henüz oluşmadığı için null hatası alabilirsiniz. Çözüm için scripti sayfanın en altına (footer) koyun veya kodunuzu DOMContentLoaded olayı içine alın.

Özet

  • Nesne yapısı (property + method) JavaScript'in temelidir.
  • window ve document en üst seviye tarayıcı nesneleridir.
  • İyi bir kullanıcı deneyimi için anlık geri bildirimler (tıklama tepkileri vb.) şarttır.
← Önceki: String İşlemleri JS Kod Örnekleri
Sonraki Ders →
JavaScript Nesneler (Objects)