Aşağıda onLoad ve onUnLoad özelliğininin kullanıldığı örnek gözükmektedir :
<html> <body onLoad="alert('hoşgeldiniz')" onUnload="alert('güle güle')"> <h1>Bu sayfa onLaod ve onUnLoad testi için hazırlanmıştır.</h1> </body> </html>
Sayfa ilk görüntülendiğinde ekranda "hoşgeldiniz" yazan bir alert (mesaj penceresi) gözükecektir. Sayfadan ayrınıldığında ise "gülü güle" yazan alert (mesaj penceresi) gözükecektir.
Aşağıda bir düğme tıklandığında alert mesaj kutusu gösteren örnek görülmektedir :
<html> <body> <h1>Bu sayfa onClick testi için hazırlanmıştır.</h1> <form> <input type="button" value="tıklayın" onClick="alert('merhaba')"></input> </form> </body> </html>
Düğme tıklandığında onClick özelliğinde tanımlanmış kod çalışacaktır. Bu kod'ta ekranda merhaba yazan mesaj kutusu gösterecektir
Aşağıda onMouseOver kullanılan bir örnek görülmektedir :
<html> <body> <h1>Bu sayfa onMouseOver testi için hazırlanmıştır.</h1> <a href="" onMouseOver="alert('merhaba')">tıklamayın</a> </body> </html>
"tıklamayın" yazan bağlantının fare ile üzerine gelindiğinde ekranda "merhaba" yazan mesaj kutusu gözükecektir.
Aşağıda basit bir form doğrulama örneği görülmektedir :
<html> <head> <script language="javascript"> function check(aForm){ if(aForm.testText.value==""){ alert("Text Alanı Boş"); return false; }else{ return true; } } </script> </head> <body> <form acton="test.jsp" name="testform" onSubmit="return check(this)"> <input type="text" name="testText" size="10"></input> <input type="submit" value="submit"></input> </form> </body> </html>
form elementinin onSubmit özelliği check fonskiyonun çağrılmasını sağlamaktadır. check fonksiyonu parametre olara form nesnesinin kendisini (this) alır. check fonksiyonu true sonuç gönderirse form server'a gönderilir. Eğer false sonucu dönülür ise bilgiler server'a gönderilmez.
check fonskiyonu içinde de form'un testText adındaki yazı alanındaki içeriğin boş olup olmadığı kontrol edilmektedir.
aşağıda onReset kullanım örneği görülmektedir :
<html> <head> <script language="javascript"> function isReset(){ alert("formunuzu resetliyorum"); return true; } </script> </head> <body> <form acton="test.jsp" name="testform" onReset="return isReset()"> <input type="text" name="testText" size="10"></input> <input type="submit" value="submit"></input> <input type="reset" value="reset"></input> </form> </body> </html>
Reset düğmesine basıldığı zaman ekranda "formunuzu resetliyorum" mesajı gözükecektir. isReset fonskiyonu true sonucu döndürdüğü için resetleme işlemi gerçekleşir.
Aşağıda onChage kullanılan bir örnek görülmektedir :
<html> <head> <script language="javascript"> function change(aTextField){ status=aTextField.value; } </script> </head> <body> <form acton="test.jsp" name="testform"> <input type="text" name="testText" size="10" onChange="change(this)"> </input> </form> </body> </html>
Yazı alanına herhangi bir yaz yazdıktan sonra başka bir elemente geçerseniz veya yazı alanından çıkarsanız onChange olayı gerçekleşir ve change fonksiyonu çağrılır. chage fonksiyonu tarayıcının status bar'ına girilen yazıyı yazar.
Javascript'te onFosuc ve onBlur kullanılan örnek aşağıdaki gibidir :
<html> <head> <script language="javascript"> function focusField(aTextField){ alert(aTextField.name+" is focused"); } function blurField(aTextField){ alert(aTextField.name+" is blured"); } </script> </head> <body> <form acton="test.jsp" name="testform" onReset="return isReset()"> <input type="text" name="testText1" size="10" onFocus="focusField(this)" onBlur="blurField(this)"></input> <input type="text" name="testText2" size="10" onFocus="focusField(this)" onBlur="blurField(this)"></input> </form> </body> </html>
Örnekte iki yaz alanında hem fosuc'landığı zaman (aktif durumuna gelmek) hem de fosuc'unu kaybettiği zaman aynı fonkiyonlar çağrılmaktadır. Anca this ile hangi yazı alanı ise o yazı alanın nesnesi gönderilmektedir. onFosuc ve onBlur işleminde ekrana yazı alanın adını yazan mesaj gözükecek.
Aşağıda bir checkbox'un onchange olayında bir Javascript fonksiyonu çağrılmaktadır :
<html> <head> <script type="text/javascript"> function selectBooleanCheckboxSelected(){ alert("selectBooleanCheckboxSelected") var c=document.getElementById('x').checked; alert("selectBooleanCheckboxSelected:"+c); } </script> </head> <body> <form name="xForm"> <input type="checkbox" id="x" name="x" value="x" onchange="selectBooleanCheckboxSelected()"> </form> </body> </html>
onay kutusu seçildiğinde veya seçim kaldırıldığında selectBooleanCheckboxSelected fonksiyonu çağrılacaktır. Bu fonksiyonda ekrana seçili olup olmadığını basmaktadır.