Web sayfalarının kullanıcıyla etkileşime girdiği anlara Etkinlik (Event) denir. Bir butona tıklanması, bir formun gönderilmesi, klavyeden bir tuşa basılması veya sayfanın aşağı kaydırılması birer etkinliktir. JavaScript, bu etkinlikleri dinleyerek (listen) belirlediğimiz fonksiyonların çalışmasını sağlar.
1. Etkinlik Dinleyici Ekleme: addEventListener
Modern JavaScript'te bir elemente etkinlik tanımlamak için addEventListener() metodu kullanılır. Bu metot iki temel parametre alır: dinlenecek etkinliğin adı ve etkinlik gerçekleştiğinde çalışacak fonksiyon.
// HTML: <button id="onay-butonu">Kaydet</button>
let buton = document.querySelector("#onay-butonu");
// Butona tıklama (click) etkinliği ekliyoruz
buton.addEventListener("click", function() {
console.log("Butona başarıyla tıklandı!");
});
2. Sık Kullanılan Etkinlik Türleri
Web projelerinde ve Blogger şablonlarında en çok karşılaşacağınız etkinlik türleri şunlardır:
Fare Etkinlikleri (Mouse Events)
click: Elemente tıklandığında tetiklenir.mouseenter: Farenin imleci elementin üzerine geldiğinde tetiklenir (Hover efekti gibi).mouseleave: Farenin imleci elementin üzerinden ayrıldığında tetiklenir.
let kutu = document.querySelector(".gorsel-kutusu");
kutu.addEventListener("mouseenter", () => {
kutu.style.transform = "scale(1.1)"; // Yakınlaşma efekti
});
kutu.addEventListener("mouseleave", () => {
kutu.style.transform = "scale(1.0)"; // Eski haline dönme
});
Klavye Etkinlikleri (Keyboard Events)
keydown: Klavyeden bir tuşa basıldığı an tetiklenir.keyup: Basılan tuş bırakıldığı an tetiklenir.
// Tüm sayfada klavye hareketlerini dinlemek için window nesnesi kullanılır
window.addEventListener("keyup", function(etkinlik) {
// 'etkinlik.key' basılan tuşun adını verir
console.log(`Basılan Tuş: ${etkinlik.key}`);
});
Form ve Sayfa Etkinlikleri
submit: Bir form gönderilmek istendiğinde tetiklenir.scroll: Sayfa yukarı veya aşağı kaydırıldığında tetiklenir (Yukarı çık butonu yapımında çok kullanılır).
3. Varsayılan Davranışı Engelleme: preventDefault()
Bazı HTML elementlerinin tarayıcı tarafından belirlenmiş varsayılan görevleri vardır. Örneğin, bir form içindeki buton formu gönderip sayfayı yeniler veya bir <a> linki sizi başka bir sayfaya yönlendirir. JavaScript ile bu varsayılan hareketleri durdurup kendi kodumuzu çalıştırmak için preventDefault() kullanırız.
let form = document.querySelector("#iletisim-formu");
form.addEventListener("submit", function(etkinlik) {
etkinlik.preventDefault(); // Sayfanın yenilenmesini engeller
console.log("Form verileri sayfa yenilenmeden kontrol ediliyor...");
});
javascript event listener, js click etkinliği, web etkileşim kodları,
Hiç yorum yok:
Yorum Gönder