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

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

主要用到的代码：

 <!DOCTYPE html>

 <html>

  <head>

   <meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8"/>

   <title>模板</title>

 <style type="text/css">

   *{

     margin: 0;

     padding: 0;

   }

   div.content{

    margin:0 auto;

    text-align:center;

   }

 </style>

  </head>

  <body>

   <div class="content">

     <form id="form1" onsubmit="ddsubmit();return false;" >

       <input name="txt" type="text" value="dee" />

       <input name="sub" type="submit" onclick="return ddclick();" value="sub" />

     </form>

   </div>

   <script type="text/javascript">

     var form = document.getElementById("form1");

     var sub = form.sub;

     function ddclick(){

       console.log("submit element click.");

     //  alert("dd");

       // return false;

     }

     function ddsubmit(){

       console.log("submit on");

       alert("da");

     }

   </script>

  </body>

 </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提到的触发后续问题）。

关于click和submit的笔记的更多相关文章

  1. Click()与Submit()

    <input type="button" /> 定义可点击的按钮,但没有任何行为.如果你不写javascript 的话,按下去什么也不会发生. button 类型常用于 ...

  2. [ajax] quick double or multiple click ajax submit cause chrome explorer's error snatshot

    快速点击ajax提交,引发的错误截图1: snapshot -2:

  3. knockoutJS学习笔记08：表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...

  4. jquery笔记整理

    01-jquery简介 1)功能:     ·html元素选取     ·Html元素操作     ·Css操作     ·Html事件函数     ·JavaScript特效和动画     ·DOM ...

  5. vue 笔记

    <div id="root"> <div> <input v-model="inputValue" /> <butto ...

  6. click() bind() live() delegate()区别

    click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() { alert("h ...

  7. javaScript 笔记(5) --- jQuery（上）

    这节整理整理 iquery.js 相关的内容... 目录 --- jQuery 语法 --- 文档就绪事件 --- jQuery 选择器 --- jQuery 事件 --- jQuery 效果 jQu ...

  8. jQuery学习笔记——事件

    何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...

  9. 初步学习jquery学习笔记（二）

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

随机推荐

  1. 【java回调】java两个类之间的回调函数传递

    背景交代:熟悉用js开发的cordovaAPP:对java一窍不通的我,老师让做一个监测用户拍照事件的功能,无奈没有找到现成的库,无奈自己动手开发java插件~~0基础java GreenHand,祝 ...

  2. The difference between QA, QC, and Test Engineering

    Tuesday, March 06, 2007 Posted by Allen Hutchison, Engineering Manager and Jay Han, Software Enginee ...

  3. Python之Web框架Django

    Python之Web框架: Django 一. Django Django是一个卓越的新一代Web框架 Django的处理流程 1. 下载地址  Python 下载地址:https://www.pyt ...

  4. Android studio安装

    1.首先上甲骨文公司的官方网站下载JDK的安装包,根据自己电脑的操作系统选择正确的版本下载.不知道下载地址的同学可以百度一下很快就能搜到.下载还的安装包如下图所示. 2.点击下载好的JDK安装程序,百 ...

  5. POJ 2823 Sliding Window 线段树区间求和问题

    题目链接 线段树区间求和问题,维护一个最大值一个最小值即可,线段树要用C++交才能过. 注意这道题不是求三个数的最大值最小值,是求k个的. 本题数据量较大,不能用N建树,用n建树. 还有一种做法是单调 ...

  6. 微信JS SDK配置授权，实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  7. EXT.JS的PROXY放在哪里，STORE放在哪里，绝对是个技术活儿啊。

    我理解的是,单独的STORE,会在应用程序开始时就加载, 而VIEWMODEL的STORE,会在VIEW加载时才开始加载. PROXY放在STORE,则会在调用这个STORE的VIEW才能请求服务器数 ...

  8. Launching web on MyEclipse Tomcat 问题

    错误提示: Launching web on MyEclipse Tomcat has encountered a problemAn internal error occurred during: ...

  9. HDU 5742 Chess SG函数博弈

    Chess Problem Description   Alice and Bob are playing a special chess game on an n × 20 chessboard. ...

  10. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...