zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    C#Ref和Out作用于引用对象时的理解
    Docker-.Net Core部署
    微服务-基于Grpc的进程通信-Protobuf-net.Grpc(4-3)
    微服务-基于Grpc的进程通信-Grpc服务注册与发现 (4-2)
    微服务-基于Grpc的进程通信-简单使用(4-1)
    ELK-Windows下系统安装(1)
    Visual Studio 2019中如何使用Git
    VS2019下载速度快完成时突然变得极慢
    Swagger 发布服务器导出Excel失败,本地导出没问题
    发布到服务器后导出Excel失败
  • 原文地址:https://www.cnblogs.com/SpringSmallGrass/p/3017369.html
Copyright © 2011-2022 走看看