Son Haberler
Anasayfa / Yazılım / JavaScript / Jquery / JavaScript Olaylar

JavaScript Olaylar

Web sayfalarında her şey eventler ile yani olaylar ile takip edilebilir. Event kelimesinin karşılığı Türkçede olaydır.

Örneğin mouse ile herhangi bir yere tıklama, klavyeden bir şeyler yazma, sayfanın yüklenmesi, bir butona tıklanması, mouse?u bir buton üzerine getirme vb bir çok eylem olaylar ile kontrol edilebilirler. Olayların gerçekleşmesi ile birlikte ilgili fonksiyonların tetiklenerek çalışması sağlanır.

Olay yöneticileri, olay gerçekleştiğinde hazırladığımız fonsiyonları tetiklememizi sağlar. Kullanımı oldukça basittir. HTML etiketlerine olay yöneticisi eklerken etiketi kapatmadan eventhandler = “ilgili script kodları” eklenir.

Bir HTML etiketinin nerede ise tamamına olay yöneticisi uygulayabiliriz. Örneğin < a > etiketine olay yöneticisi eklemek istersek şu şekilde yazarız:

<a eventhandler="script kodlarımız">

Şimdi sıra ile olaylara değinelim.

onClick: HTML etiketlerinin üzerine tek tıklandığında gerçekleşen olaylardır. Mesela WEB sayfasına eklediğimiz bir butona tıklandığında düğmeye tıklandı diye uyarı veren bir script yazalım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function mesaj()
{
alert("Düğmeye tıklandı");
}
</script>

</head>

<body>

<input type="button" name = "Buton" value = "Beni Tıkla :)" onclick="mesaj()" />

</body>
</html>

Aynı işlemi birde link yani a HTML etiketi için yapalım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function mesaj()
{
alert("Link tıklandı");
}
</script>

</head>

<body>

<a href="http://www.ismailgursoy.com.tr" onclick="mesaj()">İsmail GÜRSOY</a>

</body>
</html>

Olayları HTML etiketi içinde yazarken fonksiyon yerine direkt olarak script kodlarınıda yazabiliriz, örneğin üstteki a HTML etiketi için yaptığım uygulamayı bu sefer fonksiyon kullanmadan direkt olarak olay eventine script kodu olarak yazmak istersem;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<a href="http://www.ismailgursoy.com.tr" onclick="alert('Link açılıyor')">İsmail GÜRSOY</a>

</body>
</html>

Böylelikle linke tıklandığında hem link açılır hem de uyarı mesajı verilir.

 onDblClick Olayı : Html etiketlerinin üstüne çift tıklandığında gerçekleşecek olaylar için kullanılır. On Double Click anlamındadır, üstüne çift tıklama anlamına gelir. Örnek kullanım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<a href="http://www.ismailgursoy.com.tr" ondblclick="alert('Sayfaya Yönlendiriliyorsunuz')">İsmail GÜRSOY WEB Sayfası</a>


</body>
</html>

Burada linbke çift tıkladığınızda ilgili mesajı alırsınız.

onLoad Olayı: Bir WEB sayfasındaki herhangi bir nesnenin tamamıyla yüklenme olayını temsil eder. Body, img, frame ve frameset etiketlerinde kullanılabilir. Örnek kullanım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload="alert('Sayfa Yüklendi')">

</body>
</html>

Sayfanın yüklenme olayını kontrol ettiğimz için onload olayını body etiketi içinde yazdım. Örneğin herhangi bir image yani resim vb yüklenmesini kontrol etmek istese idim img etiketi için de onload olayını kullanabilirdim.

onUnLoad Olayı:  Nesnenin kaldırılma durumunun takibinde kullanabiliriz, örneğin body etiketinin içinde kullandığımızda sayfanın kapatılma olayını gözlemlemiş oluruz. Örnek kullanım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onunload="alert('Güle güle')">

</body>
</html>

onFocus Olayı: Bir WEB sayfası üzerinde html elemanı işlem yapılmak üzere seçildiğinde yani o nesneye odaklanıldığında bu olay çalışır. Örneğin bir metin kutusu içerisine yazı yazılmak için seçildiğinde uyarı vermesini sağlayan kodları yazalım:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function mesaj()
{
alert("Kullanıcı adınızı giriniz:");
}

</script>

</head>

<body>

<input type="text" name="kullaniciAd" onfocus="mesaj()" />

</body>
</html>

Önce mesaj fonksiyonumu yazdım, daha sonra sayfamın içinde bir textbox oluşturdum. Bu textboxa yazı yazmak istediğimde artık uyarı vermesini sağlamış oluyorum.

onBlur Olayı:  Seçilen html nesnesinin seçilme özelliğini kaybettiğinde çalışan bir olaydır. Seçilmiş eleman seçimden çıkartıldığında çalışır.

onMouseOver Olayı: Html nesnesinin üstüne mouse ile gelme olayını gözleyen olaydır. Örneğin sayfada bulunan textbox üzerine mouse ile gelindiğinde uyarı verdirmek için aşağıdaki gibi kodları yazabilirim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function mesaj()
{
alert("Kullanıcı adınızı giriniz:");
}

</script>

</head>

<body>

<input type="text" name="kullaniciAd" onmouseover="mesaj()" />

</body>
</html>

Bu sefer direkt olarak mouse ile textbox üzerine gelince uyarı verdirdik.

onMouseOut Olayı: Mouse ile herhangi bir html nesnesinin üzerinden ayrıldığımızda çalışan olaydır. Bu seferde textbox üzerinden ayrıldığımızda uyarı verdirelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function mesaj()
{
alert("Kullanıcı adınızı giriniz:");
}

</script>

</head>

<body>

<input type="text" name="kullaniciAd" onmouseout="mesaj()" />

</body>
</html>

onMouseMove Olayı: Mouse ile herhangi bir html nesnesinin üzerinde gezindiğimizde çalışan olaydır. Bu seferde textbox üzerinde gezindiğimizde uyarı verdirelim. onMouseOver olayına çok benzer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function mesaj()
{
alert("Kullanıcı adınızı giriniz:");
}

</script>

</head>

<body>

<input type="text" name="kullaniciAd" onmousemove="mesaj()" />

</body>
</html>

onMouseDown Olayı: Mouse ile HTML nesne üzerine basıldığı anda gerçekleşen olaydır. onClick olayı ile ile farkı onclick olayının bırakılma eylemidir. Örnek kullanım:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function mesaj()
{
alert("Kullanıcı adınızı giriniz:");
}

</script>

</head>

<body>

<input type="text" name="kullaniciAd" onmousedown="mesaj()" />

</body>
</html>

<strong>onMouseUp Olayı:</strong> Mousun basılı olan tuşu bırakması olayıdır. Bırakıldığında olay tetiklenir. Örnek kullanım;

[htlml]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function mesaj()
{
alert("Kullanıcı adınızı giriniz:");
}

</script>

</head>

<body>

<input type="text" name="kullaniciAd" onmouseup="mesaj()" />

</body>
</html>

onKeyDown Olayı: Klavyeden tuşa basma olayıdır. Metin kutusu nesnesinde klavyeden tuşa basıldığında olay çalışır. Örnek kullanım:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<input onkeydown="alert(String.fromCharCode(event.keyCode))" />

</body>
</html>

Event.keyCode basılan tuşun ASCII kodunu okur. Örneğin boşluk (Spacebar) tuşuna bastığımızda keyCode bize 32 değerini verir. String.fromCharCode ile okunan ASCII değeri tuşun ismine çeviriyoruz ve ekrana mesaj oalrak tuşun ismini yazıyoruz.

onSelect Olayı: Metin kutuları içerisindeki yazı seçildiğinde çalışır. Örnek kullanım:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



</head>

<body>

<input type="text" value="İsmail GÜRSOY" onselect="alert('Yazı Seçildi')" />


</body>
</html>

onResize Olayı: Tarayıcı penceresinin boyutunu değiştirildiğinde çalışır. Body etiketine yazılarak kullanılabilir. Örnek kullanım:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



</head>

<body onresize="alert('Tarayıcının boyutu değiştirildi')">

</body>
</html>

 

 

 

 

 

 

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir