Embedded Files
JavaScript ile Olay Kullanımı
Hazırlayan: Alim Can Erdoğdu
JavaScript Olaylar
Bir internet sayfasındaki her şey olaylarla gözlenebilir. Farenin herhangi bir yere tıklaması, klavyeden bir şeyler yazılması, sayfanın yüklenmesi vb. eylemler olaylarla kontrol edilebilir. Olayların gerçekleşmesi ile yazılmış fonksiyonların tetiklenmesi sağlanır.
Olay yöneticileri, olay gerçekleştiğinde hazırladığımız fonksiyonları tetiklememizi sağlar.
onClick Olayı
Html etiketlerinin üstüne tek tıklandığında gerçekleşen olaylara onClick olayları denir.
onClick Olayı Kullanımı
<a onclick="fonksiyon_ismi()"> Yazı </a>
Örnek:
<html>
<head>
<title> Onclick Olayı Kullanımı </title>
<script>
function uyari()
{
alert("Linke tıkladınız");
}
</script>
</head>
<body>
<a href="#" onclick="uyari()"> Link </a>
</body>
</html>
Yukarıdaki yaptığımız linke tıklandığında javascript web sayfasında resimdeki gibi bir alert gönderir;
onLoad Olayı
Sayfamızdaki herhangi bir nesnenin tamamıyla yüklenme olayını temsil eder. Body, img, frame ve frameset etiketlerinde kullanılabilir.
onLoad Olayı Kullanımı
<body onload="fonksiyon_ismi()">
Örnek:
<script>
function bilgi()
{
alert("Sayfa Yüklendi.");
}
</script>
<body onload="bilgi()"> </body>
onFocus Olayı
Sayfa üzerinde html elemanı işlem yapılmak üzere seçildiğinde yani o nesneye odaklanıldığında çalışan olay tipidir.
Örneğin bir metin kutusu içerisine yazı yazılmak üzere seçildiğinde uyarı vermesini sağlayabiliriz.
onFocus Olayı Kullanımı
<input type="text" onfocus="fonksiyon_ismi()"/>
Örnek:
<html>
<head>
<title> onfocus Olayı Örneği </title>
<script>
function bilgi()
{
alert("Textbox seçildi.");
}
</script>
</head>
<body >
<input type="text" onfocus="bilgi()"/>
</body>
</html>
onBlur Olayı
Seçilen html nesnesinin seçilme özelliğini kaybettiğinde çalışan olaydır. Seçilmiş eleman seçimden çıkartıldığında tetiklenir ve uyarı verir.
onBlur Olayı Kullanımı
<input type="text" onblur="fonksiyon_ismi()"/>
Örnek:
<html>
<head>
<title> onblur Olayı Örneği </title>
<script>
function islem()
{
alert("Textboxtan çıkıldı.");
}
</script>
</head>
<body >
<input type="text" onblur="islem()"/>
</body>
</html>
onResize Olayı
Tarayıcı penceresinin boyutunu değiştirdiğinde gerçekleşen olaydır. Body etiketinin içine yazılır.
onResize Olayı Kullanımı
<body onresize="fonksiyon_ismi()">
Örnek:
<html>
<head>
<title> onResize Olayı Örneği </title>
<script>
function uyari()
{
alert("Tarayıcı boyutu değişti.");
}
</script>
</head>
<body onresize="uyari()">
</body>
</html>
Page updated
Report abuse