zoukankan      html  css  js  c++  java
  • 关于click和submit的笔记

    click主要用于元素的点击时的响应事件,而submit是指表单元素form的提交事件。

    但是,当click加入到表单的提交按钮时,事情似乎就有点复杂,总是忘记了。这两天搜了下,又实践了一下。

    主要用到的代码:

     1 <!DOCTYPE html>
     2 <html>
     3  <head>
     4   <meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8"/>
     5   <title>模板</title>
     6 <style type="text/css">
     7   *{
     8     margin: 0;
     9     padding: 0;
    10   }
    11   div.content{
    12 
    13    margin:0 auto;
    14    text-align:center;
    15   }
    16   
    17 </style>
    18   
    19  </head>
    20  <body>
    21   <div class="content">
    22     <form id="form1" onsubmit="ddsubmit();return false;" >
    23       <input name="txt" type="text" value="dee" />
    24       <input name="sub" type="submit" onclick="return ddclick();" value="sub" />
    25     </form>
    26   </div>
    27   <script type="text/javascript">
    28     var form = document.getElementById("form1");
    29     var sub = form.sub;
    30     function ddclick(){
    31       console.log("submit element click.");
    32     //  alert("dd");
    33       // return false;
    34     }
    35     function ddsubmit(){
    36       console.log("submit on");
    37       alert("da");
    38     }
    39   </script>
    40  </body>
    41 </html>

    主要有三点:

    1.click和submit的顺序问题

      点击提交按钮时,一般先触发click事件,然后再触发submit事件。

      这点倒是没什么好纠结的,click是在元素界面上的事件,submit属于表单控件上的事件。

         onclick是元素在点击的时候触发的点击处理函数,而onsubmit是表单“点击”提交时,表单前的验证处理函数。为什么说“点击”提交呢?

    2.响应事件的触发后续问题

      通常我们用到的是响应处理函数,用于处理事件发生时的数据处理。

          这里主要说的是click的处理后续和submit的处理后续:click->click响应事件->submit响应事件->submit

        click的处理事件完成后,该是轮到submit事件的处理以及处理后的submit.

      而主要关注点在于,是否能够在每个节点处设置些什么来停止后续节点执行?

          我们在用onclick="method();"时,只是响应事件执行了method这个方法,而如果写成onclick="return method();"则会将method的执行结果return。

      关键在return,当return false的时候,onclick响应处理完成后,后续事件就不执行下去了;同样的,在onsubmit上也写同样的return false 也是最终不会submit。

    // 2.1  处理顺序上好特别,直到写的时候才发现,click响应是在click之后,submit则是在submit响应之前?

    2.2似乎还可以在响应事件处理中,用 event.preventDefault(); //event 事件参数

    3.submit的响应事件的不触发

      我们如果直接用javascript代码来执行表单的提交的话(即 form.submit()),是不会触发onsubmit事件的。

          这里要顺道提一下,我如果执行submit按钮的click事件,是会在执行完click之后跟着执行submit(表述遵从2提到的触发后续问题)。

  • 相关阅读:
    html5基础---canvas
    html5基础---h5特性
    JS常用知识点(一)
    微信小程序开发(一)基础知识学习
    关于C# winform唤起本地已安装应用程序(测试win10,win7可用)
    js原型链结构理解
    JS闭包应用场景之函数回调(含函数的调用个人理解)
    (十三)MySQL锁机制
    (十一)MVCC-多版本并发控制机制(转)
    jvm014-垃圾回收器
  • 原文地址:https://www.cnblogs.com/dont27/p/3788455.html
Copyright © 2011-2022 走看看