Javascriptte Olaylar (events)

Transkript

1 Javascriptte Olaylar (events) Desteklenen olaylar listesi JavaScript Events - Olaylar 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 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. <title>onclick Olayı</title> function tiklandi() alert ("tikladiniz"); <form> <input type="button" name="tikla" value="tikla" onclick=tiklandi()> Butana tıklanıp bırakıldıgında onlick olayı gercekleşir ve ardından etiketleri arasında yerleştirilen tiklandi() fonksiyonı çağrılır. Javascriptte Olaylar (events) 1

2 onmouseover, onmouseout onmouseover = mouse işaretçisi(imleç) üzerindeyken, onmouseout = mouse işaretçisi üzerinden ayrıldığında. <title>onmouseover ve onmouseout Olayı </title> function uzerinde() window.status="tıklayın ve adresine gidin" function disinda() window.status=" baglantisina tıklayın" <a href=" onmouseover = uzerinde() onmouseout =disinda()> 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. <title>onmouseover ve onmouseout Olayı </title> function uzerinde() window.status="tıklayın ve adresine gidin" function disinda() window.status=" baglantisina tıklayın" <a href=" onmouseover = uzerinde() onmouseout =disinda()> 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 : Javascriptte Olaylar (events) 2

3 <title>javascript Reset</title> <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"> 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.. <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(' if(document.fff.secenek.value==as) ms= window.open(' if(document.fff.secenek.value==ad) ms= window.open(' if(document.fff.secenek.value==af) ams= window.open(' <title>java Script Onchange</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <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!!! <br><br><br> <div align="center"><a href="javascript:onclick= window.close()" title="javascript Pencereyi Kapat" >Kapat</A> </div> 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 Javascriptte Olaylar (events) 3

4 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. <title>onload onunload Olayı</title> function hosgeldiniz() alert("web Sitemize Hosgeldiniz") function gulegule() alert("iyi sorfler..") <body onload="hosgeldiniz()" onunload="gulegule()"> 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. <img src="resim.gif" onerror="alert("resim.gif tam olarak yüklenemedi')"> Eger resmin yüklenmesi ziyaterci stop( dur) tuşu ile durdurursa ( onabort olayı gerçekleşir) olaşacak hatayı ziyaretcinize bildirebilirsiniz. <img src="resim.gif" onabort="alert("resim harita dosyası 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: <HTML> <HEAD> <TITLE> onfocus ve onblur Olayı</TITLE> <SCRIPT LANGUAGE="JavaScript1.2"> Javascriptte Olaylar (events) 4

5 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> Javascriptte Olaylar (events) 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. Mehmet Üzer Javascriptte Olaylar (events) 5