İnternet sayfamızdaki 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.
Html etiketlerinin üstüne tek tıklandığında gerçekleşen olaylara onClick olayları denir.
<a onclick="fonksiyon_ismi()"> Yazı </a>
<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>
<html>
<head>
<title> Onclick Olayı Örneği </title>
<script>
function uyari()
{
alert("Resme tıkladınız");
}
</script>
</head>
<body>
<img src="resim_adresi.jpg" onclick="uyari()">
</body>
</html>
Html etiketlerinin üstüne çift tıklandığında gerçekleşen olaylara onDblclick olayları denir.
<a ondblclick="fonksiyon_ismi()"> Yazı </a>
<script>
function uyari()
{
alert("Linke tıkladınız");
}
</script>
<a href="#" ondblclick="uyari()"> Link </a>
<script>
function uyari()
{
alert("Resme tıkladınız");
}
</script>
<img src="resim_adresi.jpg" ondblclick="uyari()">
Sayfamızdaki herhangi bir nesnenin tamamıyla yüklenme olayını temsil eder. Body, img, frame ve frameset etiketlerinde kullanılabilir.
<body onload="fonksiyon_ismi()">
Örnek :
<script>
function bilgi()
{
alert("Sayfa Yüklendi.");
}
</script>
<body onload="bilgi()"> </body>
Nesnenin kaldırılması olayını gözler. Body etiketi içerisine parametre olarak yazılırsa sayfanın kapatılma olayını gözlemiş oluruz.
Kullanımı:
<body onunload="fonksiyon_ismi()">
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.
<input type="text" onfocus="fonksiyon_ismi()"/>
<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>
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.
<input type="text" onblur="fonksiyon_ismi()"/>
<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>
Herhangi bir html nesnesinin üstüne gelindiğinde işlem yapan olay'dır.
<img src="resim.jpg" onmouseover="fonksiyon_ismi()">
<html>
<head>
<title> onMouseOver Olayı Örneği </title>
<script>
function fonksiyon()
{
alert("Resmin Üzerindesiniz.");
}
</script>
</head>
<body>
<img src="resim.jpg" onmouseover="fonksiyon()">
</body>
</html>
<html>
<head>
<title> onMouseOver Olayı Örneği </title>
<script>
function f()
{
alert("Yazının Üzerindesiniz.");
}
</script>
</head>
<body>
<div style="width:100px;" onmouseover="f()" > Yazı </div>
</body>
</html>
Fare herhangi bir html nesnesinin üzerinden ayrıldığında gözlenen olaydır.
<img src="resim.jpg" onmouseout="fonksiyon_ismi()">
<html>
<head>
<title> onMouseOut Olayı Resim Örneği </title>
<script>
function resim()
{
alert("Yazının üstünden ayrıldınız.");
}
</script>
</head>
<body>
<img src="resim_adresi.jpg" onmouseout="resim()" >
</body>
</html>
<html>
<head>
<title> onMouseOut Olayı Örneği </title>
<script>
function ornek()
{
alert("Yazının üstünden ayrıldınız.");
}
</script>
</head>
<body>
<div onmouseout="ornek()" > Yazı </div>
</body>
</html>
Fare herhangi bir html nesnesi üzerinde gezdirildiğinde meydana gelen olaydır
<img src="resim.jpg" onmousemove="fonksiyon_ismi()">
<html>
<head>
<title> onMousemove Olayı Örneği </title>
<script>
function uygulama()
{
alert("Resmin üzerinde geziyorsun.");
}
</script>
</head>
<body>
<img src="resim_adresi.jpg" onmousemove="uygulama()">
</body>
</html>
Fare nesne üzerinde basıldığı anda gerçekleşen olaydır. Click ile farkı click olayının bırakılma eylemidir.
<img src="resim.jpg" onmousedown="fonksiyon_ismi()">
<html>
<head>
<title> onMousedown Olayı Örneği </title>
<script>
function uyari()
{
alert("Linke bastın Parmağını çekersen Başka Sayfaya Gidersin");
}
</script>
</head>
<body>
<a href="https://www.google.com" onmousedown="uyari()"> Link </a>
</body>
</html>
<html>
<head>
<title> onMousedown Olayı Örneği </title>
<script>
function uyari()
{
alert("Resmin basıyorsun parmağını çek");
}
</script>
</head>
<body>
<img src="resim_adresi.jpg" onmousedown="uyari()">
</body>
</html>
Farenin basılı olan tuşu bıraktığında gerçekleşen olaydır.
<img src="resim.jpg" onmouseup="fonksiyon_ismi()">
<html>
<head>
<title> onMouseup Olayı Örneği </title>
<script>
function uyari()
{
alert("Resme tıkladın.");
}
</script>
</head>
<body>
<img src="resim_adresi.jpg" onmouseup="uyari()">
</body>
</html>
Klavyeden tuşa basma olayıdır. Metin kutusu nesnesinde klavyeden tuşa basıldığında fonksiyon çalışır.
<input type="text" onkeydown="fonksiyon_ismi()"/>
<html>
<head>
<title> onKeyDown Olayı Örneği </title>
<script>
function f()
{
alert("Textboxa Veri Girişi Yapıyorsun.");
}
</script>
</head>
<body>
<input type="text" onkeydown="f()"/>
</body>
</html>
Metin kutuları içerisindeki yazı seçildiğinde meydana gelen olaydır.
<input type="text" onselect="fonksiyon_ismi()"/>
<html>
<head>
<title> onSelect Olayı Örneği </title>
<script>
function f()
{
alert("Textbox İçindeki Yazıyı Seçtin");
}
</script>
</head>
<body>
<input type="text" onselect="f()"/>
</body>
</html>
Tarayıcı penceresinin boyutunu değiştirdiğinde gerçekleşen olaydır. Body etiketinin içine yazılır.
<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>
| Önceki Ders: JavaScript Hazır Fonksiyonlar | Sonraki Ders: JavaScript Nesneler |