JavaScript Olaylar

İ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.

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 1:

<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>

Örnek 2:

<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>

 

onDblClick Olayı

 Html etiketlerinin üstüne çift tıklandığında gerçekleşen olaylara onDblclick olayları denir.

onDblClick Olayı Kullanımı:

<a ondblclick="fonksiyon_ismi()"> Yazı </a>

Örnek 1:

<script>

function uyari()
{

alert("Linke tıkladınız");

}

</script>


<a href="#" ondblclick="uyari()"> Link </a>

Örnek 2:

<script>

function uyari()
{

alert("Resme tıkladınız");

}

</script>


<img src="resim_adresi.jpg" ondblclick="uyari()">

 

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>

 

onUnLoad Olayı

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()">

 

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>




 

onMouseOver Olayı

Herhangi bir html nesnesinin üstüne gelindiğinde işlem yapan olay'dır.

onMouseOver Olayı Kullanımı:

<img src="resim.jpg" onmouseover="fonksiyon_ismi()">

Örnek 1:

<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>

 

Örnek 2:

<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>

 

onMouseOut Olayı

Fare herhangi bir html  nesnesinin üzerinden ayrıldığında gözlenen olaydır.

onMouseOut Olayı Kullanımı:

<img src="resim.jpg" onmouseout="fonksiyon_ismi()">

Örnek 1:

<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>

 

Örnek 2:

<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>

 

onMouseMove Olayı

Fare herhangi bir html nesnesi üzerinde gezdirildiğinde meydana gelen olaydır

onMouseMove Olayı Kullanımı:

<img src="resim.jpg" onmousemove="fonksiyon_ismi()">

Örnek:

<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>

 

onMouseDown Olayı

Fare nesne üzerinde basıldığı anda gerçekleşen olaydır. Click ile farkı click olayının bırakılma eylemidir.

onMouseDown Olayı Kullanımı:

<img src="resim.jpg" onmousedown="fonksiyon_ismi()">

Örnek:

<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>

 

Örnek:

<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>

 

onMouseUp Olayı

Farenin basılı olan tuşu bıraktığında gerçekleşen olaydır.

onMouseUp Olayı Kullanımı:

<img src="resim.jpg" onmouseup="fonksiyon_ismi()">

Örnek:

<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>

 

onKeyDown Olayı

Klavyeden tuşa basma olayıdır. Metin kutusu nesnesinde klavyeden tuşa basıldığında fonksiyon çalışır.

onKeyDown Olayı Kullanımı:

<input  type="text" onkeydown="fonksiyon_ismi()"/>

Örnek:

<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>

 

onSelect Olayı

Metin kutuları içerisindeki yazı seçildiğinde meydana gelen olaydır.

onSelect Olayı​​​​​​​ Kullanımı:

<input  type="text" onselect="fonksiyon_ismi()"/>

Örnek:

<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>

 

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>