JavaScript Olaylar

Kullanıcı tarafından yapılan eylemler sonucunda işlem yapmak için kullanılan JavaScript olayları, event listener veya olay yöneticisi ile ilgili bilgiler yer alıyor.

HTML nesneleri üzerinde oluşan her eylem bir olaydır.

JavaScript HTML nesneleri üzerinde oluşan olay sonucunda işlem yapabilir.

HTML olayları

HTML olayları tarayıcı veya kullanıcının yaptığı eylemlerdir.

  • Web sayfasının yüklenmesi,
  • Veri giriş alanının değişmesi,
  • Butona tıklanması

Oluşan HTML olayı sonucunda bir şeyler yapmak istenebilir.

JavaScript HTML olayı gerçekleştiğinde işlem yapmamızı sağlar.

HTML her olay için olay özelliğine JavaScript kodu yazmamıza imkan verir.

Aşağıdaki örnekte butona tıklanma olayı için HTML onclick özelliği eklenmiştir.

<button onclick="alert(Date());">Buraya tıkla</button>

HTML olay özellikleri genellikle JavaScript fonksiyonunu çalıştırmak için kullanılır.

<script>
  function Topla(sayi1,sayi2) {
    alert(sayi1 + sayi2);
  }
</script>
<button onclick="Topla(5, 20);">Buraya tıkla</button>

Bazı HTML olayları

Olay Açıklaması
onchange HTML öğesi değiştirildiğinde tetiklenir.
onclick Kullanıcı HTML nesnesine tıkladığında tetiklenir.
onmouseover Kullanıcı HTML nesnesinin üzerine geldiğinde tetiklenir.
onmouseout Kullanıcı HTML nesnesinin üzerinden ayrılınca tetiklenir.
onkeydown Kullanıcı klavye tuşuna basınca tetiklenir.
onload Tarayıcı sayfayı yüklemeyi bitirdiğinde tetiklenir.

JavaScript olay tutucu ile ne yapılabilir

JavaScript olayları tarayıcı eylemlerini ve kullanıcı veri girişini kontrol etmek, onaylamak için kullanılabilir.

  • Sayfa yüklendiğinde yapılması gereken işlemler,
  • Sayfa kapatıldığında yapılması gereken işlemler,
  • Kullanıcı HTML nesnesine tıkladığında yapılması gereken işlemler,
  • Kullanıcının girdiği veriyi doğrulamak için yapılması gereken işlemler,
  • ve dahası için kullanılabilir.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Yusuf SEZER

Yusuf SEZER

Computer Engineer who interested about web technologies, algorithms, artificial intelligence and embedded systems; constantly exploring new technologies.


Bunlara'da bakmalısın!