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ı

OlayAçıklaması
onchangeHTML öğesi değiştirildiğinde tetiklenir.
onclickKullanıcı HTML nesnesine tıkladığında tetiklenir.
onmouseoverKullanıcı HTML nesnesinin üzerine geldiğinde tetiklenir.
onmouseoutKullanıcı HTML nesnesinin üzerinden ayrılınca tetiklenir.
onkeydownKullanıcı klavye tuşuna basınca tetiklenir.
onloadTarayı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!