Javascriptte Olaylar (events) ve Örnekler
Desteklenen olaylar listesi
Events yani olayları Javascript nesnelerini tetikleyenler unsurlar olarak görmeliyiz.
Örnegin; Mause linklerin üzerinde geldiginde, "onMouseOver" özelliği tetiklenmiş olur.
Eğer linki tıklarsa, bu sefer önce "onMouseDown", sonra ise "onMouseUp" ve "onClick" tetiklenmiş olur.
Nesnelere Tanımlanabilecek bazı olaylar şunlardır.
1. onclick Fareyle tıklamayı ifade eder.
2. ondblclick Fareyle çift tıklamayı ifade eder.
3. onmouseover Farenin imleciyle üzerine gelmeyi ifade eder.
4. onmouseout Farenin imlecini üzerinden çekmeyi ifade eder.
5. onmousedown Fare düğmesine basmayı ifade eder.
6. onmouseup Fare düğmesini bırakmayı ifade eder.
7. onload Sayfanın yüklenmesini ifade eder.
8. onunload Sayfanın kapatılmasını ifade eder.
9. onchange Form aracının değişmesini ifade eder.
10. onsubmit Form bilgilerinin gönderilmesini ifade eder.
11. onreset Form bilgilerinin silinmesini ifade eder.
12. onselect Form aracının seçilmesini ifade eder.
13. onblur Form aracının pasif hale geçmesini ifade eder.
14. onfocus Form aracının aktif hale geçmesini ifade eder.
15. accesskey İstenen karakterin girilmesini ifade eder.
16. tabindex Nesnelerin işlem sıralamasını numaralandırır.
17. onkeydown Tuşun basılmasını ifade eder.
18. onkeyup Tuşun salınmasını ifade eder.
19. onfocus Tuşun basılıp salınmasını ifade eder.
bu olaylardan en çok kullanılanları inceleyelim.
onClick
Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onClick olayı gerçekleşir. Olayın gerçekleşmesi için mouse'un nesneyi tıklayıp bırakması gereklidir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır.
Örnek :
<head>
<title>OnClick Olayı</title>
<script language="javascript1.2">
<
function tiklandi(){
alert ("tikladiniz");
}
>
</script></head>
<body>
<form>
<input type="button" name="tikla" value="tikla" onClick=tiklandi()>
</form>
</body>
</html>
Butana tıklanıp bırakıldıgında onlick olayı gercekleşir ve ardından <head> etiketleri arasında yerleştirilen tiklandi() fonksiyonı çağrılır.
onMouseOver , onMouseOut
onMouseOver = mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında.
Örnek :
<head>
<title>onMouseOver ve onMouseOut Olayı </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script language="javascript1.2">
<
function uzerinde()
{window.status="Tıklayın ve http://javascript-dersi.blogspot.com adresine gidin" }
function disinda()
{window.status="http://javascript-dersi.blogspot.com baglantisina tıklayın" }
>
</script>
</head>
<body>
<a href="http://javascript-dersi.blogspot.com" onMouseOver = uzerinde()
onMouseOut =disinda()>
http://javascript-dersi.blogspot.com</a>
</body>
</html>
Bur örnek birak htmlde bağlara verilen title özelliğine benziyor.
onSubmit
Web programlamada action olayında bilgileri doldurulan formu sunucuya yollar.
Javascript’ de bu onSubmit olayı ile form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.
Basit bir örnek.
<head>
<title>onMouseOver ve onMouseOut Olayı </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script language="javascript1.2">
<
function uzerinde()
{window.status="Tıklayın ve http://javascript-dersi.blogspot.com adresine gidin" }
function disinda()
{window.status="http://javascript-dersi.blogspot.com baglantisina tıklayın" }
>
</script>
</head>
<body>
<a href="http://javascript-dersi.blogspot.com" onMouseOver = uzerinde()
onMouseOut =disinda()>
http://javascript-dersi.blogspot.com</a>
</body>
</html>
OnSubmit nesnesi ile kullanıcıya OK ve Cancel tuşları ile emin misin ? uyarı penceri çıkartıyoruz.
onReset
Bu olay ile web sayfanızda bulunan formdaki yazdıklarınızın tamamen silinir. Sil (Reset) tuşunu tıklarsınız size boş bir form gelir.
Fakat siz onReset olayı ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.
Bunun ile ilgili bir örnek yapalım :
<head>
<title>JAvascript Reset</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield">
<input type="text" name="textfield2">
<textarea name="textarea" ></textarea>
<input type="reset" name="Reset" value="Temizle">
</form>
</body>
</html>
onChange
Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır.
Mouse u bu alanlar üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz.
Güzel Bir Örnek yapalım..
<head>
<script language="JavaScript">
function ss() {
var al="hotmail"
var as ="super"
var ad="mynet"
var af="yahoo"
if(document.fff.secenek.value==al){
ms= window.open('http://www.hotmail.com')}
if(document.fff.secenek.value==as){
ms= window.open('http://www.superonline.com.tr')}
if(document.fff.secenek.value==ad){
ms= window.open('http://www.mynet.com.tr')}
if(document.fff.secenek.value==af){
ams= window.open('http://www.yahoo.com')}}
</script>
<title>java Script Onchange</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body >
<form name="fff" >
<select name="secenek" onchange="ss()" >
<option >site seciniz!!1
<option value="hotmail" >hotmail.com
<option value="yahoo" >yahoo.com
<option value="super" >superonline.com
<option value="mynet" >mynet.com
</select>
Gitmek Istediginiz Site!!!
</form>
<br><br><br>
<div align="center"><a href="JavaScript:onClick= window.close()" title="JavaScript Pencereyi Kapat" >Kapat</A>
</div>
</body>
</html>
onLoad , onUnLoad
Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir.
Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız.
Mesela sayfa yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise Güle Güle diyebiliriz.
Head kısmında sayanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır.
Şimdi de bunun için gerekli kodlara bir göz atalım.
<head>
<title>onLoad onUnLoad Olayı</title>
<script language="javascript1.2">
<
function hosgeldiniz()
{
alert("Web Sitemize Hosgeldiniz")
}
function gulegule()
{
alert("Iyi sorfler..")
}
>
</script>
</head>
<body onLoad="hosgeldiniz()" onUnload="gulegule()">
</body>
</html>
onError onAbort
Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur.
Bir resminde image map yaptınız ve dolayısıyla düzgün çalışabilmesi için resmin tam yüklenmesi gerekir.
Örnek :
Eger resmin yüklenmesi ziyaterci stop( dur) tuşu ile durdurursa ( onabort olayı gerçekleşir) olaşacak hatayı ziyaretcinize bildirebilirsiniz.
tam olarak yüklenemedi. İlgili resim bir harita olduğu için
yüklenmesini tavsiye ederiz.')">
onFocus, onBlur
HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz.
Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:
<HEAD>
<TITLE> onFocus ve onBlur Olayı</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
function goster()
{
document.isimForm.ad.value="Adınız kayda geçmiştir."
}
function uyar()
{
document.isimForm.ad.value="Lütfen yanlışlık yapmayınız!"
}
// >
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="isimForm">
<P>Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:
<BR><INPUT TYPE="text" NAME="ad" VALUE="Adınızı buraya yazınız" SIZE=25 onBlur="goster()">
<P>Şimdi de aşağıdaki kutuya mesleğinizi yazın:
<BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleğinizi buraya yazınız" SIZE=25 onFocus="uyar()">
</FORM>
</BODY>
</HTML>
Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor.
onResize
Tarayıcı ekranı boyutu değişirse
Örnek
<html>
<head>
<style>
body {
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body onresize="TarayiciEkranOlcusu()">
<p>Tarayıcı yüksekliği ve genişliğini görüntülemek için pencereyi yeniden boyutlandırmayı deneyin.</p>
<p id="demo"></p>
<h1 id="Durum"></h1>
<script>
function TarayiciEkranOlcusu() {
/*let w = window.outerWidth;
let h = window.outerHeight;*/
let Olculer = "Tarayıcı genişliği: " + window.outerWidth;
Olculer += " yüksekligi: " + window.outerHeight;
let Durumu;
if(window.outerWidth < 600) {
Durumu = 'Cep Modu';
Arkaplan = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDsou-9Yj0s2NTQ1pGx4zvMQj12BW1NUvgLA&s';
}
else {
Durumu = 'Ekran Modu';
Arkaplan = 'https://png.pngtree.com/thumb_back/fh260/background/20230408/pngtree-rainbow-curves-abstract-colorful-background-image_2164067.jpg'
}
document.body.style.backgroundImage = 'url('+ Arkaplan +')';
document.getElementById("Durum").innerHTML = Durumu + Olculer;
}
</script>
</body>
</html>
onKeyDown
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2012/11/28/10/16/stars-67616_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#UGemi {
position: absolute;
}
</style>
<script>
var Adim = 10;
var y=0, x =0;
function TusaBasildi(event) {
BasilanTusNo = event.keyCode;
//alert(BasilanTusNo); //basılan tusun nosu
switch(BasilanTusNo) {
case 38 : y-=Adim; break; //yukarı tus
case 40 : y+=Adim; break; //asagi tus
case 37 : x-=Adim; break; //sol tus
case 39 : x+=Adim; break; //sag tus
}
//console.log(x);
document.getElementById('UGemi').style.top = y + 'px';
document.getElementById('UGemi').style.left = x + 'px';
}
</script>
</head>
<body onkeydown="TusaBasildi(event)">
<img src="resimler/rocket.gif" id="UGemi" />
</body>
</html>
Mehmet Üzer
