crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Olay Dinleyicisi Nasıl Eklenir? (addEventListener)
Eskiden HTML içine onclick="fonksiyon()" gibi kodlar yazılırdı. Ancak modern JavaScript'te, HTML ile JS kodunu birbirinden ayırmak için addEventListener metodunu kullanıyoruz. Bu yöntem, aynı elemente birden fazla olay eklememize de olanak tanır.
Temel Yazım Şekli:
JavaScript:
element.addEventListener("olay_adi", fonksiyon);2. En Sık Kullanılan Olay Türleri
A. Mouse Olayları (Tıklama ve Hareket)
Kullanıcının faresiyle yaptığı her hareket bir olay tetikleyebilir.
[]click: Elemana tıklandığında.
[]dblclick: Çift tıklandığında.- mouseenter / mouseleave: Fare elemanın üzerine geldiğinde veya üzerinden ayrıldığında.
JavaScript:
const btn = document.querySelector("#gonder-btn");
btn.addEventListener("click", (event) => {
console.log("Butona tıklandı!");
console.log("Tıklanan koordinatlar: ", event.clientX, event.clientY);
});B. Klavye Olayları (Yazma ve Tuş Kontrolü)
Form girişlerinde veya oyun geliştirmede hayati önem taşır.
[]input: Bir input alanına her karakter yazıldığında.
[]keydown: Bir tuşa basıldığında.- keyup: Basılan tuş bırakıldığında.
JavaScript:
const aramaKutusu = document.querySelector("#search");
aramaKutusu.addEventListener("input", (e) => {
console.log("Kullanıcı şunu yazıyor: " + e.target.value);
});C. Pencere ve Kaydırma Olayları
Sayfanın genel hareketlerini takip etmek için kullanılır.
[]scroll: Sayfa aşağı/yukarı kaydırıldığında.
[]resize: Tarayıcı penceresi yeniden boyutlandırıldığında.
JavaScript:
window.addEventListener("scroll", () => {
const kaydirmaMiktari = window.scrollY;
if (kaydirmaMiktari > 100) {
document.body.style.backgroundColor = "#f0f0f0";
}
});3. Event Objesi ve PreventDefault
Her olay tetiklendiğinde, JavaScript otomatik olarak bir event (veya e) objesi oluşturur. Bu obje, olayın gerçekleştiği yer ve zaman hakkında detaylı bilgi içerir.
En çok kullanılan yöntemlerden biri event.preventDefault() metodudur. Tarayıcının o olay için varsayılan olarak yaptığı işlemi (örneğin bir formun gönderilip sayfanın yenilenmesi veya bir linke tıklanınca başka sayfaya gidilmesi) durdurur.
JavaScript:
const form = document.querySelector("#uyelik-formu");
form.addEventListener("submit", (e) => {
e.preventDefault(); // Sayfanın yenilenmesini engelledik!
console.log("Form verileri JS ile işlenecek, sayfa yenilenmeyecek.");
});4. Olay Kabarcıklanması (Event Bubbling)
İç içe geçmiş elementlerde bir olaya tıkladığınızda, o olay en içteki elementten başlar ve yukarıya (parent elementlere) doğru yayılır. Buna Bubbling (Kabarcıklanma) denir. Eğer bu yayılmayı durdurmak isterseniz event.stopPropagation() kullanabilirsiniz.
Pratik Bir Forum Uygulaması: Karakter Sayacı
JavaScript:
const mesajAlani = document.querySelector("#mesaj");
const sayac = document.querySelector("#karakter-sayisi");
mesajAlani.addEventListener("keyup", () => {
const uzunluk = mesajAlani.value.length;
sayac.innerText = ${uzunluk} karakter yazıldı.;
if (uzunluk > 140) {
sayac.style.color = "red";
} else {
sayac.style.color = "black";
}
});Sonuç
Event Listeners, JavaScript'in kullanıcıyla kurduğu iletişim dilidir. Bu olayları doğru yönetmek, hem performanslı hem de kullanıcı dostu uygulamalar geliştirmenizi sağlar. Unutmayın, çok fazla olay dinleyicisi eklemek sayfayı yorabilir; bu yüzden gereksiz olanları removeEventListener ile kaldırmayı da düşünebilirsiniz.