İnternette gezinirken bir butona tıkladığınızda açılan pencereler, farenizi bir resmin üzerine getirdiğinizde değişen renkler veya bir formu eksik doldurduğunuzda karşınıza çıkan uyarı mesajları dikkatinizi çekmiş olabilir. Tüm bu etkileşimli içerikler, kullanıcıların eylemlerine yanıt veren dinamik yapıların birer sonucudur. İşte bir web sayfasını sadece okunabilen statik bir metin olmaktan çıkarıp, kullanıcıyla etkileşime giren canlı bir uygulamaya dönüştüren bu sisteme JavaScript dünyasında Olaylar (Events) adı verilir.
Eğer JavaScript’i ilk defa öğreniyorsanız, “Olaylar” konusu DOM (Document Object Model) manipülasyonunun kalbidir. Metin girme, tıklama, farenin hareket etmesi veya klavyeden bir tuşa basılması gibi durumların tamamı birer “olay”dır. Bu rehberde, olayların ne olduğunu, sayfanıza nasıl ekleneceğini ve yaygın olay türlerini örneklerle pekiştirerek öğreneceğiz.
Olayları (Events) Sayfaya Eklemenin Yolları
JavaScript’te bir HTML elementinin bir olaya (örneğin tıklamaya) tepki vermesini sağlamanın temel olarak üç farklı yolu vardır.
1. HTML İçerisinde Belirtmek (Satır İçi – Inline) Olayları tanımlamanın en eski ve basit yolu, doğrudan HTML etiketinin içine yazmaktır:
<p id="ozel" onclick="sihir()">Sihir için buraya tıkla!</p>
Bu kodun okunması ve ne yapacağının tahmin edilmesi oldukça kolaydır. Ancak bu yöntemin bazı dezavantajları vardır: Bu şekilde bir elemente sadece bir tane olay atayabilirsiniz ve bu olayı JavaScript içinden dinamik olarak değiştirmek pek pratik değildir.
2. JavaScript Özelliği (Property) Olarak Atamak Bir diğer yöntem, elementi JavaScript ile seçip olay özelliğini doğrudan atamaktır:
document.getElementById("ozel").onclick = function() { sihir(); };
Bu yaklaşım, HTML ile JavaScript kodunu birbirinden ayırdığı için daha temiz bir yapı sunar. Ayrıca bu özelliği istediğiniz zaman başka bir fonksiyonla üzerine yazarak kolayca değiştirebilir, olayı çok daha dinamik bir hale getirebilirsiniz.
3. Olay Dinleyicileri (Event Listeners) Kullanmak Modern web geliştirmede en iyi ve en çok kullanılan yöntem addEventListener() metodudur. Bu metot sayesinde aynı elemente, aynı olay türü için birden fazla fonksiyon (dinleyici) atayabilirsiniz.
HTML özelliklerinde (örneğin onclick veya onmouseover) olayların isimleri “on” önekiyle başlarken, addEventListener() kullanırken “on” öneki kaldırılır (sadece click veya mouseover yazılır).
document.getElementById("ozel").addEventListener("click", sihir);
Dikkat ederseniz burada sihir fonksiyonunu çağırırken sonuna parantez () koymadık. Eğer parametre göndermeniz gerekiyorsa, bunu anonim bir fonksiyon içine sarmanız gerekir: function() { sihir(arg1); }.
Sık Kullanılan JavaScript Olay Türleri
Web sayfalarında kullanıcıların yapabileceği eylemlere göre özelleşmiş birçok olay türü bulunur. Bunları ana kategoriler halinde inceleyelim.
1. Sayfa Yüklenme Olayları (Load Events)
Bir web sayfasındaki elementleri JavaScript ile seçmek (örneğin getElementById ile) istediğinizde, o elementin tarayıcı tarafından tamamen yüklenmiş olması gerekir. Aksi takdirde JavaScript bulamadığı element için hata verir.
window.onload: Bu olay, sayfa üzerindeki resimler, dosyalar ve tüm DOM yapısı dahil olmak üzere her şey tamamen yüklendiğinde tetiklenir.DOMContentLoaded: Sayfadaki HTML DOM ağacının oluşturulması tamamlandığında, resimlerin veya dış dosyaların yüklenmesini beklemeden hemen tetiklenir. Sayfanızın daha hızlı tepki vermesi için harika bir seçenektir.
2. Fare (Mouse) Olayları
Kullanıcının faresi ile yaptığı eylemleri yakalayan olaylardır. En bilinenleri şunlardır:
onclick: Fare ile tıklandığında.ondblclick: Fare ile çift tıklandığında.onmousedown/onmouseup: Fare tuşuna basılı tutulduğunda (mousedown) ve basılı tutulan tuş bırakıldığında (mouseup) çalışır.onmouseover/onmouseout: Fare imleci bir elementin üzerine geldiğinde (mouseover) ve o elementin üzerinden ayrıldığında (mouseout) tetiklenir.
Örnek Uygulama: Fareyle üzerine gelindiğinde rengi değişen bir kutu.
<div id="kutu" onmouseover="renkDegistir()" style="width: 100px; height: 100px; background-color: pink;"></div>
<script>
function renkDegistir() {
document.getElementById("kutu").style.backgroundColor = "blue";
}
</script>
Kullanıcı imleci pembe kutunun üzerine getirdiği anda, onmouseover olayı tetiklenir ve kutunun rengi maviye döner.
3. Klavye (Key) Olayları
Kullanıcının klavye tuşlarıyla girdiği etkileşimleri yakalamak için kullanılır. Özellikle form kontrollerinde ve oyunlarda çok işe yarar.
onkeydown: Tuşa basıldığı an tetiklenir (henüz tuş bırakılmamıştır).onkeypress: Tuşa basılıp bırakılma anını temsil eden genel işlemdir.onkeyup: Basılan tuş serbest bırakıldığında tetiklenir.
Hangi tuşa basıldığını öğrenmek için event.key özelliğini kullanabilirsiniz. Örneğin, bir giriş (input) kutusuna sadece rakam girilmesini sağlamak için, basılan tuşun numara olup olmadığını kontrol eden bir onkeypress olayı yazabilir ve geçersizse işlemi engelleyebilirsiniz.
4. Form ve Girdi (Input) Olayları
Kullanıcıdan veri alırken kullanılan özel olaylardır.
onchange: Bir elementin değeri değiştiğinde tetiklenir. Ancak genellikle girdi kutusunun (input) odak kaybetmesini (kullanıcının başka bir yere tıklamasını) bekler.onblur: Bir element odağını kaybettiğinde (imleç o elementten çıktığında) değer değişmese bile tetiklenir.onfocus(veyafocus): Fare imleci veya klavye ile bir girdi kutusunun içine girildiğinde, yani odaklanıldığında tetiklenir.onsubmit: Bir form gönderileceği zaman (Submit butonuna basıldığında) tetiklenir. Form doğrulaması yaparken, eğer kullanıcının girdiği verilerde bir eksik (örneğin boş isim alanı) varsa, JavaScript fonksiyonundareturn false;diyerek formun gönderilmesini iptal edebilirsiniz.
Event Target (Olay Hedefi) Nedir?
Bir olay tetiklendiğinde (ateşlendiğinde), arka planda sihirli bir event değişkeni (nesnesi) yaratılır ve fonksiyonunuzun kullanımına sunulur. Bu nesnenin en ilginç ve faydalı özelliği target (hedef) özelliğidir.
event.target, olayı tam olarak hangi HTML elementinin başlattığını bize söyler. Örneğin, büyük bir formunuz olduğunu düşünün. Olayı başlatan butonu bulmak için fonksiyonun içinde event.target kullanabilir, ardından event.target.parentElement diyerek butonun ebeveyni olan forma, oradan da formun içindeki diğer alanların (firstname, lastname gibi) değerlerine (value) ulaşabilirsiniz.
DOM Olay Akışı: Bubbling ve Capturing
İç içe geçmiş birden fazla HTML elementiniz (örneğin iç içe 5 tane <div>) olduğunu ve hepsinde bir tıklama (click) olayı tanımlandığını varsayalım. En içteki elemente tıkladığınızda hangisinin olayı önce çalışır?.
Event Bubbling (Olay Köpürmesi) JavaScript’te varsayılan davranış “Bubbling” yani köpürmedir. Tıpkı suyun altındaki bir baloncuğun yukarı çıkması gibi, olay en içteki elementten başlar ve adım adım en dıştaki ebeveyn elementlere doğru iletilir. En içteki kutuya tıklasanız bile, dıştaki kutuların tıklama olayları da sırasıyla tetiklenir.
Event Capturing (Olay Yakalama) Bu davranışın tam tersidir. Olay, en dıştaki HTML elementinden başlar ve tıklanan en içteki elemente doğru ilerler. Bu özelliği aktif etmek günümüzde pek yaygın olmasa da, ihtiyaç duyduğunuzda addEventListener() metodunun üçüncü argümanına true (useCapture) yazarak bu davranışı açabilirsiniz.
Not: Event Bubbling ve Capturing mantığını kavramak, “Event Delegation” (Olay Temsili) adı verilen, yüzlerce liste elemanına tek tek olay atamak yerine, sadece onları kapsayan ana elemente bir olay atayarak sistem performansını artırmanızı sağlayan çok güçlü bir tekniğin temelidir.
Sonuç
JavaScript olayları, bir web sitesini izleyicinin sadece okuduğu bir katalog olmaktan çıkarıp, kullanıcıyla etkileşime giren, yaşayan bir yazılıma dönüştürür. addEventListener ile düğmelere tıklama yeteneği kazandırmak, event.key ile klavyeyi dinlemek veya onsubmit ile veri güvenliğini sağlamak, modern Frontend (önyüz) geliştiriciliğinin temelidir. Kendi projelerinizde basit butonlara click olayları ekleyerek veya formlarınıza onchange atamaları yaparak, olayların nasıl kusursuz çalıştığını test edebilirsiniz!
