常用的JavaScript事件例子，自己理解，如果有不对或不足希望大家指出来！
onmouseover、onmouseout、onchange、onfocus、onblur、onsubmit、onclick、onload和onunload
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5.     <title>javascript常用验证</title> 
  6.     <style> 
  7.           
  8.     </style> 
  9.       
  10.     <script type="text/javascript"> 
  11.         function mouseOver(){  
  12.             alert("当鼠标移入时触发事件...");  
  13.         }  
  14.         function mouseOut(){  
  15.             alert("当鼠标移出时出发事件...");  
  16.         }  
  17.         function checkEmail(str){  
  18.             if (str.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)   
  19.                 return alert("you are right!!");  
  20.             else   
  21.                 alert("oh,no!!!");  
  22.         }  
  23.         function   
  24.             alert("哈哈，我是onload事件，在页面加载时会执行我的....")  
  25.         }  
  26.         function onUnloadEvent(){  
  27.             alert("哈哈，我是unonload事件，在页面离开的时候会执行的....");  
  28.         }  
  29.         function onClickEvent(){  
  30.             alert("我是鼠标点击事件哈哈...");  
  31.         }  
  32.         function a(){  
  33.             document.getElementById("trId").style.cssText="background-Color:#00F";  
  34.         }  
  35.         function b(){  
  36.             document.getElementById("trId").style.cssText="background-Color:#fff";  
  37.         }  
  38.         function c(){  
  39.             document.getElementById("inputId").focus();  
  40.             document.getElementById("inputId").select();  
  41.         }  
  42.         function setFocusStyle(){  
  43.             document.getElementById("lname").style.background="yellow";  
  44.         }  
  45.         function setFocusStyle1(){  
  46.             document.getElementById("fname").style.background="yellow";  
  47.         }  
  48.         function setOnblurStyle(){  
  49.             document.getElementById("lname").style.background="red";  
  50.         }  
  51.         function setOnblurStyle1(){  
  52.             document.getElementById("fname").style.background="red";  
  53.         }  
  54.     </script> 
  55. </head> 
  56.  
  57. <body onload="onloadEvent()"> 
  58. <a href="http://www.w3school.com.cn" onmouseover="mouseOver()">你点我啊,当鼠标被移动到某个元素自上时触发的事件</a><br><br> 
  59. <a href="http://www.w3school.com.cn" onmouseout="mouseOut()">你点我啊,当鼠标从某个元素上面一开时触发的事件</a><br><br> 
  60. <a href="http://www.w3school.com.cn" onmouseout="mouseOver()">你点我啊</a><br><br> 
  61. onchange事件(当用户改变某个域的内容时触发的事件)：<br> 
  62. <input type="text" id="email" size="30" onchange="checkEmail(this.value)" value=""/><br><br>   
  63. <form> 
  64. <table border="1" bgcolor="" width="30%" class=""> 
  65.     <tr><td align="center">a1</td></tr> 
  66.     <tr><td align="right">a2</td></tr> 
  67.     <tr><td align="right">a3</td></tr> 
  68.     <tr><td align="left">a4</td></tr> 
  69.     <tr><input type="button" id="buttonId" value="OK5" onClick="onClickEvent()"/></tr> 
  70. </table> 
  71. </form> 
  72.  
  73. <table class="table2"  cellpadding="0" border="1" bordercolor="#0033FF"  > 
  74.     <tr align="center" onmouseover="this.style.backgroundColor='#00F';" onmouseout="this.style.backgroundColor='#fff';"> 
  75.         <th class="th1" align="center">登记</th> 
  76.         <th class="th1" align="center">通过鼠标移入移出事件来改变行的颜色</th> 
  77.     </tr> 
  78.     <tr onmouseover="this.style.backgroundColor='#00F';" onmouseout="this.style.backgroundColor='#fff';"> 
  79.         <th>A0000001</th> 
  80.         <td>鼠标移入我变色</td> 
  81.     </tr> 
  82.     <tr id="trId" onmouseover="a()" onmouseout="b()"> 
  83.         <th>A0000002</th> 
  84.         <td>鼠标移出我又变色</td> 
  85.     </tr> 
  86. </table> 
  87. <br> 
  88. 自身获得焦点，但获得焦点的标志是该文本框内出现输入光标<br> 
  89. 如果要让里面的内容全部被选中，还必须使用this.select();<br> 
  90. <input type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();"><br> 
  91. <input id="inputId" type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();"><br> 
  92. onfocus事件举例(当点击输入框的时候获得焦点会触发获得焦点事件，当点击到别处时会失去焦点会触发失去焦点事件)：<br> 
  93. First Name:<input id="fname" type="text" onfocus="setFocusStyle1()" onblur="setOnblurStyle1()"><br> 
  94. Last Name:<input id="lname" type="text" onfocus="setFocusStyle()" onblur="setOnblurStyle()"/><br> 
  95.  
  96. onsubmit与onclick的区别：onsubmit是表单提交时触发，onclick是按钮点击时触发(onclick对button有效)：<br> 
  97. 一个是提交表单操作，把东西传给服务器，一个是鼠标的单击操作；<br> 
  98. 当然，onclick可以通过js来触发onsubmit事件，如通过onclick触发一个函数，在函数里面调用document.form.submit();就可以触发表单提交事件呵..<br> 
  99. onsubmit事件用法：<input type="submit" value="submit" /> 
  100. <form name="form" action="#" method="post" onsubmit="check();">     
  101.       <p><label>称呼:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="name" id="name" /></p>     
  102.       <p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea><</p>     
  103.       <p class="noborder"><input type="submit" value="submit" /><input type="reset" value="reset"/><p>     
  104.       </form>     
  105.     <script type="text/javascript"> 
  106.         function check(){  
  107.             var name=document.getElementById("name").value;  
  108.             var contens=document.getElementById("contents").value;  
  109.             if (name=="")  
  110.             {  
  111.                 alert("用户名不能为空onsubmit");  
  112.                 exit();  
  113.             }  
  114.             if (content=="")  
  115.             {  
  116.                 alert("内容不能为空onsubmit");  
  117.                 exit();  
  118.             }  
  119.         }  
  120.     </script> 
  121. onclick事件用法：<input type="button" value="submit" onclick="check1()"/> 
  122. <form name="form" action="#" method="post"> 
  123.       <p><label>称呼:</label><input type="text" name="name" id="name" /></p> 
  124.       <p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea></p> 
  125.       <p> 
  126.       <input type="button" value="submit" onclick="check1()"/> 
  127.       <input type="reset" value="reset"/><p> 
  128.       </form> 
  129.     <script type="text/javascript"> 
  130.         function check1(){  
  131.             var name=document.getElementById("name").value;  
  132.             var contents=document.getElementById("contents").value;  
  133.             if (name=="")  
  134.             {  
  135.                 alert("用户名不能为空  
  136.             }  
  137.             if (contents=="")  
  138.             {  
  139.                 alert("内容不能为空  
  140.             }  
  141.         }  
  142.     </script> 
  143. </body> 
  144. </html>