Javascript Olaylara (Events) Giriş

Merhaba arkadaşlar. Bu yazımda sizlere Javascript'te olaylar konusunu anlatmaya çalışacağım.

Olaylar javascript dilinde çok önemli bir yere sahiptir.

Olaylar (Events) Nedir ?

Olaylar bir element'in üzerine gelince, tıklayınca, çift tıklayınca neler olacağını belirtmemizi sağlayan işlevdedir. Mesela bir butona tıklayınca butonun arka plan rengini kırmızı yap gibi...

Tarayıcıda da event kullanılır. Mesela javascript ile sayfa yüklendiği an şu işlemi yap diyebiliriz. Şimdi size örneklerle olayların kullanımını anlatacağım.

Şu an düşündüm de bu konuyu tek makalede anlatmak saçmalık olur çünkü çok uzun. :)


Olaylar direk html etiketinde tanınabilirler.

<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Şekil Değiştirdim.</h1> <!-- Mouse üzerine gelince ve üzerinden ayrılınca renk değiştiren element -->
</body>
</html>


Tek tırnak ve çift tırnak ile tanımlanabilirler

<!DOCTYPE html>
<html>
<body>
<h1 onmouseover='style.color="red"' onmouseout='style.color="black"'>Şekil değiştirdim</h1> <!-- Mouse üzerine gelince ve üzerinden ayrılınca renk değiştiren element -->
</body>
</html>

Html Elementinde event tanımladığımız zaman içerisine herhani bir javascript fonksiyonu yazabiliriz.

<!DOCTYPE html>
<html>
<body>
<button onclick="isimyaz()">Tıkla Ve İsmimi Gör</button> 

<script>
function isimyaz(){
alert("Zafer Yıldız");
}
<script>
</body>
</html>

Yukardaki kod bloğu çalıştığında eğer butona tıklarsanız ekranda pop-up şeklinde Zafer Yıldız yazısını göreceksiniz.

Ayrıca onclick eventi ile direk elementin içindeki değeri de değiştirebiliriz.

<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML='Zafer Yıldız'">Tıkla Ve İsmimi Gör</button> 
</body>
</html>

Bu sefer yukardaki kodu çalıştırıp butona tıkladığınız zaman Tıkla ve ismimi gör yazısı yerine Zafer Yıldız Yazacaktır.

Not: Javascript Fonksiyonları genelde bir kaç satır ve daha uzun olduğu için fonksiyon olarak tanımlayıp çağırmanız html elementinin içinde yazmanızdan daha sağlıklı olacaktır.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi

0 YORUM

Bu konuya henüz yorum yapılmamış

Yorum Yap

@COPYRIGHT KodlamakLazım Tüm Hakları Saklıdır.