Olaylar (Events) — JavaScript: Başlangıçtan İleri Seviyeye

Event, kullanıcı veya tarayıcı eylemleridir: tıklama, klavye, kaydırma, yükleme, hata...

`addEventListener`

const btn = document.querySelector("#save");
 
btn.addEventListener("click", () => {
  console.log("Tıklandı!");
});

Aynı eleman üzerinde aynı tipten birden çok dinleyici eklenebilir. Eski onclick = ... atamasında bu mümkün değildi.

Event objesi

Callback'e event parametresi geçer:

btn.addEventListener("click", (e) => {
  console.log(e.target);       // tıklanan element
  console.log(e.currentTarget); // dinleyici eklenen element
  console.log(e.type);         // "click"
 
  e.preventDefault();          // varsayılan davranışı engelle (form submit, link git)
  e.stopPropagation();         // bubbling'i durdur
});

Yaygın event tipleri

el.addEventListener("click", ...);
el.addEventListener("submit", ...);    // form
el.addEventListener("input", ...);     // her tuşla
el.addEventListener("change", ...);    // blur'da değişti
el.addEventListener("keydown", ...);
el.addEventListener("keyup", ...);
el.addEventListener("focus", ...);
el.addEventListener("blur", ...);
el.addEventListener("mouseenter", ...);
el.addEventListener("mouseleave", ...);
 
window.addEventListener("scroll", ...);
window.addEventListener("resize", ...);
window.addEventListener("load", ...);
document.addEventListener("DOMContentLoaded", ...);

Klavye

input.addEventListener("keydown", (e) => {
  console.log(e.key);    // "Enter", "a", "ArrowLeft"
  console.log(e.code);   // fiziksel tuş ("KeyA")
  console.log(e.ctrlKey, e.shiftKey, e.altKey, e.metaKey);
 
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    submit();
  }
});

Form

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  const obj = Object.fromEntries(data);
  console.log(obj);
});

Event bubbling ve delegation

Bir eleman tıklanınca event üst elementlere de yayılır (bubble). Bunu delegation için kullanırız: bir parent'a tek dinleyici koy, çocuklarını yönet.

// ❌ kötü: her li için ayrı listener
document.querySelectorAll(".todo").forEach((li) =>
  li.addEventListener("click", handle)
);
 
// ✅ iyi: tek listener
document.querySelector("#todoList").addEventListener("click", (e) => {
  const li = e.target.closest(".todo");
  if (li) handle(li);
});

Avantajlar: dinamik eklenen elementler için çalışır, daha az hafıza.

Listener kaldırma

const handler = () => console.log("hi");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler); // aynı referansla

Anonim fonksiyon ile eklersen kaldıramazsın!

Bir kerelik dinleyici

btn.addEventListener("click", handler, { once: true });

İlk çalıştıktan sonra otomatik kaldırılır.

AbortController ile toplu temizlik

const ctrl = new AbortController();
 
el.addEventListener("click", h1, { signal: ctrl.signal });
window.addEventListener("scroll", h2, { signal: ctrl.signal });
 
ctrl.abort(); // ikisini birden kaldırır

Modern, temiz pattern. Özellikle React useEffect cleanup için altın değerinde.