JavaScript事件处理(重要)

JavaScript的时间处理是当网页中发生某件事情的时候,它会调用我们的一些函数,或者调用我们一些语句

1.得到焦点的事件:onFocus 在用户为了输入而选择select,text,textarea等时

   

 <form action="" method="post" name="test">
    <input type ="text" name= "name" value ="gaoweigang" onFocus = "JavaScript:alert(document.test.name.value);">
    </form>

 onFocus = "JavaScript:alert(document.test.name.value);" 意思是

     1)当这个输入框得到焦点的时候,我们执行一段javascript语句。

     2)JavaScript: 指的后面是javascript的语句,这个可以省略,有没有都行

2.失去焦点事件: onBlur 在select ,text,password,textarea 失去焦点时

3.onChange :在select ,text, textarea 的值被改变且失去焦点时

4.onclick:在一个对象被鼠标点中时(button checkbox radio lik set submit text textarea等)

<img src = "head.jpg" onclick="alert('welcome, javascript!');"></img>

注意:alert里面要使用单引号,不能使用双引号,写的时候一定要注意,否则调试特别麻烦

5.onLoad (这个一般使用在body中):第一次把这个文档加载到我们的窗口的时候,触发onload事件

<body onload="alert('welcome!');">

 6.onUnload(一般使用在body中):当这个html文档被别的文档给替换的时候,比如刷新的时候,重新加载文档

<body onload="alert('welcome!');" onunload = "alert('bye-bye');">

7.onMouseOver :当鼠标移动到一个对象上时

 <img src ="head.jpg" onmouseover="alert('哈哈');" onmouseout="alert('嘿嘿');" /> 

8.onMouseOut  :当鼠标从一个对象移开时

9.onSelect        :当form对象中的内容选中时,eg:input对象中内容被选中时,就会触发该事件

 <input type="text" name="name" onselect ="alert(document.name.name.value);">

10.onSubmit:出现在用户通过提交按钮提交一个表单时。当我们点提交按钮时,表单还没有提交之前,会触发此事件

 <form name ="name"action="" method="post"  onsubmit="alert(document.name.submit.value);">
      <input type="text" name="name" onselect ="alert(document.name.name.value);">
      <input type="submit" name="submit" value ="提交">
   </form> 

 当我们确定提交后,表单才会提交

   2)onsubmit="return false"  意思是说: 当我点击提交按钮时,触发onsubmit事件,执行onsubmit中的内容,因为是return false,那么程序就不再继续往下执行了,到此为止,也就是提交不了。

   3)我们 可以 通过 onsubmit的 return的这个值 来确定 该表单时继续提交,还是不提交;这个非常重要,我们可以通过它来进行表单的验证。

下面我们来写一个简单的表单验证(实现了在客户端的检验)

<html>
  <head>
  <script type="text/javascript">
   function check(){//验证用户名是否为空
    if(document.name.username.value==""){
    alert("用户名必须填写");
    return false;
      }
    return true;   
 }
  </script>
   </head>
  
  <body>
  <form name ="name" action="index.jsp" method="post"  onsubmit="return check()">//根据check()的返回值来确定是不是要继续提交
      用户名:<input type="text" name="username"/>
      <input type="submit" name="submit" value ="提交">
   </form> 
  </body>
</html>

 

 

posted @ 2013-04-12 21:38  springstudent  阅读(219)  评论(0编辑  收藏  举报