Javascript'te Event(Olay)

Javascipt event-driven bir dildir. Javascript kodları bir event(olay) sonucu çalıştırılırlar. Bu olay sayfanın yüklenmesi, bir düğmenin tıklanması, bir form elemanının aktif hale gelmesi vs.. olabilir. Bir olay olduğunda programcı bu olayı yakalar ve istenen işlemler yapar.

onLoad-onUnload

onLoad sayfa yüklenir yüklenmez bir kod çağırmak için kullanılır. onUnload ise sayfa kapatıldığı zaman bir işlem yapmak için kullanılır. Aşağıda sayfa yüklenir yüklenmez hoşgeldiniz mesajı gösteren ve kullanıcı sayfadan ayrılırken de güle güle mesajı gösteren bir örnek görülmektedir. onLaod ve unLoad body tag'inin içinde olmalıdır.

  1 <html>
  2 <body onLoad="alert('hoşgeldiniz')" onUnload="alert('güle güle')">
  3 	<h1>Bu sayfa onLaod ve onUnLoad testi için hazırlanmıştır.</h1>
  4 </body>
  5 </html>

onClick

OnClick bir düğme tıklandığında veya bir link tıklandığında bir işlem yapmak için kullanılır. Onay ve seçenek kutuları içinde onClick kullanılabilir. Aşağıda bir süğmeye tıklandığında merhaba mesajı veren bir örnek görüyorsunuz.

  1 <html>
  2 <body>
  3 	<h1>Bu sayfa onClick testi için hazırlanmıştır.</h1>	
  4 	<form>
  5 		<input type="button" value="tıklayın" onClick="alert('merhaba')"></input>
  6 	</form>
  7 </body>
  8 </html>

onMouseOver ve OnMouseOut

onMouseOver fare ile bir link üzerine gelindiğinde bir işlem yapmak için kullanılır. OnMouseOut ise tam tersine fare link'in üzerinden ayrıldığı zaman bir işlem gerçekleştirmek içindir. Aşağıda bir link'in üzerine gelindiğinde hoşgeldin yazan bir örnek görülmektedir.

  1 <html>
  2 <body>
  3 	<h1>Bu sayfa onMouseOver testi için hazırlanmıştır.</h1>	
  4 	<a href="" onMouseOver="alert('merhaba')">tıklamayın</a>
  5 </body>
  6 </html>

onSubmit

Form bilgileri submit düğmesine tıklandığında form'un action property'sindeki programa gönderilir. Eğer gönderme işleminden önce bir işlem yapmak istiyorsanız form tag'in onSumbit property'sini kullanacaksınız. Eğer form istediğiniz gibi doldurulmamışsa form bilgilerini göndermeyebilirsiniz. Aşağıdaki örnekte form bir text alanından oluşmakta. Eğer text alanı doldurulmamışsa form bilgisi gönderilmemektedir.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function check(aForm){
  5 				if(aForm.testText.value==""){
  6 					alert("Text Alanı Boş");
  7 					return false;
  8 				}else{
  9 					return true;
 10 				}
 11 			}
 12 		</script>
 13 	</head>
 14 <body>
 15 	<form acton="test.jsp" name="testform" onSubmit="return check(this)">
 16 		<input type="text" name="testText" size="10"></input>
 17 		<input type="submit" value="submit"></input>		
 18 	</form>
 19 </body>
 20 </html>

Submit event'i gerçekleştiğinde check fonksiyonu çağrılmaktadır. Bu fonksiyon true gönderirse form bilgisi gönderilir. Eğer false gönderirse fomr bilgisi gönderilmez. check fonksiyonu form'daki adı testText olan textfield'dinin boş olup olmadığını kontrol ediyor. Eğer boşsa alert ile bir mesaj gönderiyor ve textfield'in boş olduğunu söylüyor.

onReset

Girilen Form bilgilerini temizlemek için kullanılan reset düğmesi tıklandığında bir işlem yapmak istiyorsanız onReset kullanılır. Aşağıdaki örnekte reset düğmesi koyuyoruz ve onReset olayında reset işleminin yapaılacağını bildiren bir mesaj gösteriyoruz.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function isReset(){
  5 				alert("formunuzu resetliyorum. İşlem bir kaç dakika sürebilir.");
  6 				return true;
  7 			}
  8 		</script>
  9 	</head>
 10 <body>
 11 	<form acton="test.jsp" name="testform" onReset="return isReset()">
 12 		<input type="text" name="testText" size="10"></input>
 13 		<input type="submit" value="submit"></input>
 14 		<input type="reset" value="reset"></input>				
 15 	</form>
 16 </body>
 17 </html>

isReset fonksiyonu sonuç olarak true gönderdiği için işlem gerçekleşmektedir.

onChange

Bir formda bir değişiklik yapıldığında bir işlem yapmak istiyorsanız onChange property'sini kullanacaksınız. onChange özelliği ancak başka bir yere focus'landığında çağrılır. Her harf girişinde çağrılmaz. Aşağıdaki örnekte bir text alanına yazı girildikçe yazıyı status bar'da gösteren bir örnek vardır. Yazıyı girip başka bir yere tıklarsanız yazının statusbar'da yazılı olduğunu görürsünüz.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function change(aTextField){
  5 				status=aTextField.value;
  6 			}
  7 		</script>
  8 	</head>
  9 <body>
 10 	<form acton="test.jsp" name="testform" onReset="return isReset()">
 11 		<input type="text" name="testText" size="10" onChange="change(this)"></input>
 12 	</form>
 13 </body>
 14 </html>

status window.status yerine kullanılabilir. Değişme olduğunda change fonksiyonu çağrılmaktadır. Bu fonksiyona textdfield parametre olarak gönderilir.

onFocus ve onBlur

Bir form elemanı tıklandığı focus'landığı zaman (aktif hale geldiği zaman) bir işlem yapmak için onFocus kullanılır. Eğer bir eleman focus'luğunu kaybettiğinde bir işlem yapmak istiyorsanız onBlur kullanılır. Aşağıdaki örnekte textfield focus'landığı zaman focus'landığını belirten bir mesaj, focus'luk özelliği kalkınca bunu belirten bir örnek bulunmaktadır.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function focusField(aTextField){
  5 				alert(aTextField.name+" is focused");
  6 			}
  7 			function blurField(aTextField){
  8 				alert(aTextField.name+" is blured");
  9 			}
 10 			
 11 		</script>
 12 	</head>
 13 <body>
 14 	<form acton="test.jsp" name="testform" onReset="return isReset()">
 15 		<input type="text" name="testText1" size="10" onFocus="focusField(this)" onBlur="blurField(this)"></input>
 16 		<input type="text" name="testText2" size="10" onChange="change(this)" onFocus="focusField(this)" onBlur="blurField(this)"></input>		
 17 	</form>
 18 </body>
 19 </html>