JavaScript Events

Web Sayfalarını Canlandırmak İçin Güçlü, Eğlenceli ve Bir Tık Sihirli Bir Araç ✨🧙‍♂️

Bir web sayfasını hayal et:
HTML iskelet 🦴
CSS makyaj 💄
Peki hareket? Tepki? Canlılık?

👉 JavaScript Events işte bu noktada devreye girer ve sayfaya der ki:

“Sen artık sadece bakılan değil, etkileşime girilen bir şeysin.”

1️⃣ Event (Olay) Nedir?

“Bir şey oldu!” anı 💥

Event, kullanıcı ya da tarayıcı tarafından gerçekleşen her türlü aksiyondur.

Gerçek hayattan örnek:

• Zil çaldı → Event 🚪
• Telefon titreşti → Event 📱
• Kahve bitti → Event (acı ama gerçek 😢)

Web dünyasında:

• Butona tıklanır → click
• Klavyeye basılır → keydown
• Sayfa yüklenir → load
• Mouse bir yere gelir → mouseover

JavaScript’in tepkisi:

“Hah! Bir şey olduysa, ben buradayım.”

2️⃣ En Yaygın JavaScript Event’leri

(Bunları bilmeden frontend olmaz 😎)

🔹 click – Tıklamanın Gücü

button.addEventListener("click", () => {
  console.log("Tıklandı!");
});

📌 Kullanım alanları:

• Butonlar
• Menü açma/kapama
• Modal, popup

🔹 mouseover & mouseout – Mouse’un Dedikoduları 🐭

box.addEventListener("mouseover", () => {
  box.style.backgroundColor = "red";
});

box.addEventListener("mouseout", () => {
  box.style.backgroundColor = "blue";
});

🧠 Mantık:

• Mouse gelince → kırmızı
• Mouse gidince → mavi

👉 Hover efektlerinin JS versiyonu (CSS’le de yapılır ama JS bazen şart)

🔹 keydown – Klavyenin Sesi ⌨️

document.addEventListener("keydown", (event) => {
  console.log(event.key);
});

📌 Nerede kullanılır?

• Form validasyonu
• Oyunlar 🎮
• Kısayollar (Ctrl + S gibi)

3️⃣ Event Nasıl Yakalanır?

JavaScript “dinleme” sanatıdır 👂

❌ Eski Usul (Inline HTML)

<button onclick="tikla()">Tıkla</button>

Sorun ne?

• HTML kirlenir 😬
• Yönetmesi zor
• Büyük projelerde kaos

✅ Modern Yöntem: addEventListener (Asıl Olay 🔥)

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

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

btn.addEventListener("click", () => {
  alert("Butona bastın! 🎉");
});

Burada ne oluyor?

1. getElementById → elementi yakaladık 🎯
2. addEventListener → olayı dinlemeye başladık 👂
3. "click" → hangi olay
4. () => {} → olay olunca çalışacak fonksiyon

4️⃣ Callback Mantığı

“O olursa ben bunu yaparım” 🤝

btn.addEventListener("click", selamVer);

function selamVer() {
  console.log("Merhaba!");
}

🧠 Önemli ipucu:

selamVer ❌ çağrılmıyor
selamVer() ❌ yanlış

Doğrusu:

addEventListener("click", selamVer);

👉 JavaScript diyor ki:

“Ben zamanı gelince çağırırım, sen karışma.”

5️⃣ Event Object

Olayın tüm dedikodusu burada 🕵️‍♂️

btn.addEventListener("click", (event) => {
  console.log(event);
});

event sayesinde şunları öğrenirsin:

• Hangi element tetikledi?
• Mouse nerede?
• Hangi tuşa basıldı?

Pratik Örnek: Hangi Tuş?

document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    console.log("Enter’a bastın 🚀");
  }
});

6️⃣ preventDefault()

“Dur! Bunu yapma!” 🚫

Formlar genelde sayfayı yeniler.
Bazen istemezsin.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form gönderilmedi 😎");
});

📌 Kullanım alanları:

• Form validasyonu
• SPA projeleri
• AJAX işlemleri

7️⃣ Event Bubbling (Minik Spoiler 😏)

div.addEventListener("click", () => {
  console.log("Div tıklandı");
});

button.addEventListener("click", () => {
  console.log("Button tıklandı");
});

👉 Button’a tıklarsan:

1. Button çalışır
2. Div çalışır

Buna bubbling denir (olay yukarı çıkar 🫧)

e.stopPropagation();

ile durdurabilirsin.

8️⃣ En Sık Yapılan Hatalar (Acı Tecrübeler 😬)

❌ DOM yüklenmeden elemente ulaşmak
❌ Inline event kullanmak
❌ Fonksiyonu parantezle vermek
❌ Aynı event’i 10 kez yazmak

✅ Çözüm:

document.addEventListener("DOMContentLoaded", () => {
  // Her şey burada
});

9️⃣ Altın Değerinde Pratik İpuçları 🏆

✨ Tek listener, çok iş
✨ Event delegation kullan
✨ CSS ile yapılacak şeyi JS ile yapma
✨ Kodunu küçük fonksiyonlara böl
✨ Console.log utanılacak bir şey değil 😄

🎬 Final Sahnesi

JavaScript Events:

• Web’in refleksleri
• Kullanıcıyla diyalog
• Frontend’in olmazsa olmazı