Olay Yönetimi (Events)

Event Listener

const buton = document.querySelector("#btn");

buton.addEventListener("click", function() {
    alert("Butona tıklandı!");
});

// Arrow function ile
buton.addEventListener("click", () => {
    console.log("Tıklandı!");
});

Sık Kullanılan Olaylar

Pratik Örnek: Canlı Arama

<input type="text" id="arama" placeholder="Ara...">
<ul id="liste">
    <li>HTML Dersi</li>
    <li>CSS Temelleri</li>
    <li>JavaScript Giriş</li>
    <li>DOM Kullanımı</li>
</ul>

const aramaInput = document.getElementById("arama");
const elemanlar = document.querySelectorAll("#liste li");

aramaInput.addEventListener("input", (e) => {
    const aranan = e.target.value.toLowerCase();
    
    elemanlar.forEach(eleman => {
        const metin = eleman.textContent.toLowerCase();
        eleman.style.display = metin.includes(aranan) ? "" : "none";
    });
});