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

Web sayfalarında etkileşim; tıklama, klavye girişi, form gönderme, sayfa yüklenmesi gibi event (olaylar) ile yönetilir. Modern JavaScript’te olayları yönetmenin en doğru yolu addEventListener() kullanmaktır.

---

1) DOM Seçiciler (querySelector / getElementById)

<button id="btnKaydet" class="btn btn-primary">Kaydet</button>
<div class="sonuc"></div>

const btn = document.getElementById("btnKaydet");       // id ile
const sonuc = document.querySelector(".sonuc");         // CSS seçici ile (ilk eşleşme)
const hepsi = document.querySelectorAll(".sonuc");      // NodeList (çoklu)

---

2) Event Nedir? (click örneği)

btn.addEventListener("click", function (event) {
  // event: olayın detaylarını taşır
  console.log("Tıklandı!", event.type);

  sonuc.textContent = "Kaydedildi!";
});

---

3) Inline onClick Yerine Neden addEventListener?

---

4) DOM Hazır Olmadan Çalıştırma (DOMContentLoaded)

Script’iniz sayfa yüklenmeden elementleri seçmeye çalışırsa null dönebilir. Bunu çözmek için scripti sayfanın en altına almak veya DOMContentLoaded kullanmak gerekir.

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("btnKaydet");
  btn.addEventListener("click", () => alert("Hazırım!"));
});

---

5) Form Submit Olayı ve preventDefault()

<form id="frmLogin">
  <input type="text" id="username" placeholder="Kullanıcı adı">
  <input type="password" id="password" placeholder="Şifre">
  <button type="submit">Giriş</button>
</form>

<div id="msg"></div>

const frm = document.getElementById("frmLogin");
const msg = document.getElementById("msg");

frm.addEventListener("submit", (e) => {
  e.preventDefault(); // formun sayfayı yenilemesini engeller

  const u = document.getElementById("username").value.trim();
  const p = document.getElementById("password").value;

  if (u.length < 3) {
    msg.textContent = "Kullanıcı adı en az 3 karakter olmalı.";
    return;
  }
  if (p.length < 6) {
    msg.textContent = "Şifre en az 6 karakter olmalı.";
    return;
  }

  msg.textContent = "Form doğrulama başarılı ✅";
});

---

6) Event Bubbling (Yukarı Taşma) ve Delegation

Olaylar DOM ağacında yukarı doğru taşır (bubbling). Bu sayede çok sayıda elemana tek tek event bağlamak yerine üst kapsayıcıya tek event bağlayıp içeride tıklananı yakalayabiliriz. Buna event delegation denir.

<ul id="liste">
  <li data-id="1">Ankara</li>
  <li data-id="2">İstanbul</li>
  <li data-id="3">İzmir</li>
</ul>

document.getElementById("liste").addEventListener("click", (e) => {
  // tıklanan eleman:
  const li = e.target.closest("li");
  if (!li) return;

  alert("Seçilen: " + li.textContent + " (id=" + li.dataset.id + ")");
});

---

7) stopPropagation() ve capture

const outer = document.querySelector(".outer");
const inner = document.querySelector(".inner");

outer.addEventListener("click", () => console.log("Outer tıklandı"));
inner.addEventListener("click", (e) => {
  console.log("Inner tıklandı");
  // e.stopPropagation(); // Outer'a gitmesini engeller (gerektiğinde)
});

---

8) En Sık Kullanılan Event Tipleri

Event	Nerede?	Ne işe yarar?
click	buton/link	tıklama
input	textbox	anlık yazı değişimi
change	select/checkbox	değer değiştiğinde
submit	form	form gönderimi
keydown	document/input	tuşa basma
DOMContentLoaded	document	DOM hazır olduğunda

---

9) Mini Uygulama: Canlı Arama (input event)

<input id="q" placeholder="Ara...">
<ul id="sehirler">
  <li>Ankara</li>
  <li>İstanbul</li>
  <li>İzmir</li>
  <li>Bursa</li>
</ul>

const q = document.getElementById("q");
const ul = document.getElementById("sehirler");

q.addEventListener("input", () => {
  const needle = q.value.trim().toLowerCase();

  ul.querySelectorAll("li").forEach(li => {
    const ok = li.textContent.toLowerCase().includes(needle);
    li.style.display = ok ? "" : "none";
  });
});

---

Sık Yapılan Hatalar (Kısa Liste)

• Element null: DOM hazır olmadan seçmek (çözüm: scripti alta al, DOMContentLoaded kullan)
• Handler() çağırmak: addEventListener("click", handler()) yazmak
• Form yenileniyor: submit içinde preventDefault() unutmak
• Çok event bağlamak: listelerde delegation kullanmamak