JavaScript Olaylar (Events) Nedir?

JavaScript’te Olay (Event) Nedir?

JavaScript’te olaylar (events), kullanıcı veya tarayıcı tarafından tetiklenen aksiyonlardır. Kullanıcının bir butona tıklaması, bir formu doldurması, klavyeye basması ya da sayfanın yüklenmesi gibi etkileşimler birer “olay” olarak tanımlanır.

Bu olaylara tepki vermek, yani etkileşimi yakalayıp işlemler yapmak, web sayfalarına canlılık ve kullanıcı dostu deneyim kazandırır.

En Sık Kullanılan JavaScript Olayları

Olay Dinleyici (Event Listener) Kullanımı

JavaScript’te bir olaya tepki vermek için addEventListener() metodu en yaygın ve doğru yaklaşımdır.

📌 Örnek: Butona tıklama

<button id="btn">Tıkla</button>
<p id="mesaj"></p>

<script>
  const btn = document.getElementById("btn");
  const mesaj = document.getElementById("mesaj");

  btn.addEventListener("click", function() {
    mesaj.textContent = "Butona tıkladınız!";
  });
</script>

Geleneksel Yöntem (Inline Events)

<button onclick="alert('Tıklandı!')">Tıkla</button>

❌ Tavsiye edilmez, çünkü HTML ve JS karışır. addEventListener daha esnek ve yönetilebilir bir yapıdır.

Klavye Olayları

Kullanıcının klavyeye bastığı tuşları yakalayabilirsiniz:

document.addEventListener("keydown", function(e) {
  console.log("Basılan tuş: " + e.key);
});

Form Olayları

Bir form gönderildiğinde (submit), işlem yapılmadan önce doğrulama yapılabilir:

document.getElementById("form").addEventListener("submit", function(e) {
  e.preventDefault(); // Sayfanın yenilenmesini engeller
  alert("Form gönderildi!");
});

Olay Nesnesi (event object)

Her olay tetiklendiğinde, bir event nesnesi oluşur ve bu nesne sayesinde olayın ayrıntılarına erişebilirsiniz.

element.addEventListener("click", function(e) {
  console.log(e.target); // Olayı tetikleyen element
});

Birden Fazla Olay Dinleme

Aynı elemente birden fazla olay bağlayabilirsiniz:

const kutu = document.getElementById("kutu");

kutu.addEventListener("mouseover", () => {
  kutu.style.backgroundColor = "lightblue";
});

kutu.addEventListener("mouseout", () => {
  kutu.style.backgroundColor = "white";
});

🎯 Sonuç

JavaScript’te olaylar, kullanıcı deneyimini dinamik hale getirmenin temel yollarından biridir. click, keyup, submit, mouseover gibi olaylarla kullanıcı etkileşimlerine tepki verebilir, etkileşimli web sayfaları oluşturabilirsiniz. Olay dinleyicileriyle (event listeners) yapıyı modüler ve yönetilebilir kılmak, sürdürülebilir bir kod yapısı sağlar.