Browser programları kendiliklerinden veya GUI sonucu, öyle bazı olaylara (örneğin Mouse işaretçisinin bir nesnenin üzerine gelmesi veya bilgisayar kullanıcısının Mouse’un veya klavyenin bir düğmesini tıklaması gibi) yol açarlar ki, bu olay işletim sistemi-GUI-Browser yoluyla HTML belgesi (ve dolayısıyla Javascript) açısından önem taşıyabilir. Bunlara event (olay) denir.
•Kullanıcının Mouse’un bir düğmesini tıklaması, Click, bu olayı karşılayan ve olay yönlendiren metot (Event Handler) ise onClick(tıklandığında, tıklama halinde) adını taşır.
•Javascript’e bu olayın olması halinde icra edilmek üzere özel emirler verilebilir. Bu tür komutların yazılmasında şu yöntem izlenir:
event.fonksiyon_veya_metod(argüman)
Olaylar ve Açıklamlarını aşağıdaki listeden görebilirsiniz daha sonra bunlarla alakalı kısa kısa örnek uygulamalar yapacağız..
• onLoad : Sayfa yüklenmesi tamamlandığında
• onUnload : Sayfa yüklenmesi bittiğinde(kullanıcı sayfadan çıktığında)
• onFocus : Eleman focusu kazandığında
• onBlur : Eleman focusu kaybettiğinde
• onChange : Seçim yapıldığında veya metin değiştirildiğinde
• onSubmit : Submit(gönder) butonu basıldığında
• onReset : Reset düğmesi tıklandığında
• onMouseOver : Mouse pointer bir alan veya linkin üzerine geldiğinde
• onMouseOut : Mouse pointer bir alan veya linkten uzaklaştırıldığında
• onMouseDown : Mouse düğmesine basıldığında
• onMouseMove : Mouse hareket ettirildiğinde
• onMouseUp : Mouse düğmesi bırakıldığında
• onClick : Nesne üzerine mouse ile tek tıklandığında
• onDblClick : Nesne üzerine mouse ile çift tıklandığında
• onAbort : Resim yüklemesi kesildiğinde
• onError : Resmin veya ekranın yüklenmesinde hata oluştuğu zamanlar
• onSelect : Yazı seçildiğinde
• onReSize : window veya frame yeniden boyutlandırıldığında
• onKeyDown : Bir tuşa basıldığında
• onKeyUp : Basılı tuş bırakıldığında
• onKeyPress : Bir tuşa basıldığında veya basılı tutulduğunda
Farenin Hangi tuşuna basıldı ..:
<html> <head> <script type="text/javascript"> function hangibuton(event){ if (event.button==2){ alert("Sağ Buton") } else if (event.button==1){ alert("Sol Buton") } else { alert(" Orta Tuşu") } } </script> </head> <body onmousedown="hangibuton(event)"> <p>Fare ile tıklayın </p> </body> </html>
Mouse Koordinatları
<html> <head> <script type="text/javascript"> function show_coords(event){ x=event.clientX; y=event.clientY; document.koor.xkoor.value=x; document.koor.ykoor.value=y; } </script> </head> <body onMouseMove="show_coords(event)"> <p>Mouse Koordinataları</p> <form name="koor" Method="POST"> X : <input type="text" name="xkoor" > <br> Y : <input type="text" name="ykoor" > <br> </form> </body> </html>
Basılan Tuşun ascii kodu
<html> <head> <script type="text/javascript"> function hangitus(event){ alert(event.keyCode) } </script> </head> <body onkeyup="hangitus(event)"> <p><b>Note:</b> Klavyeden bir tuşa basın....!</p> </body> </html>
“onClick” Olayı
<html> <head> <title>Olay: Onclick</title> <script language="JavaScript"> function mesaj() { sayfa = window.open("","yeni_sayfa", "toolbar=0,location=0,directories=0, status=0, menubar=0,scrollbars=0,resizable=0, copyhistory=0,width=280, height=80, left=200, screenX=200, top=100, screenY=100") sayfa.document.write("<h1>Merhaba</h1>") } </script> </head> <body> <a href="#" onclick="mesaj()">Mesajınız var.</a> </body> </html>
Olay: OnDblclick
<html> <head> <title>Olay: OnDblclick</title> <script language="JavaScript"> function mesaj() { alert("Hiperlinkin üzerine geldiniz.") } </script> </head> <body> <img src="web.jpg" border="0" ondblclick="mesaj()"><br> <p>Resmin üzerine çift tıklarsanız mesaj kutusu görünür.</p> </body> </html>
Olay: OnMouseOver
<html> <head> <title>Olay: OnMouseOver</title> <script language="JavaScript"> function mesaj() { alert("Hiperlinkin üzerine geldiniz.") } </script> </head> <body> <a href="#" onmouseover="mesaj()">Hiperlinkin üzerine gelirseniz mesaj görünür.</a> </body> </html>
Olay: OnMouseOut
<html> <head> <title>Olay: OnMouseOut</title> <script language="JavaScript"> function mesaj() { alert("Hiperlinkten çıktınız.") } </script> </head> <body> <a href="#" onmouseout="mesaj()">İmleci hiperlinkin üzerinden çekerseniz mesaj görünür.</a> </body> </html>