submit()和onsubmit()的区别

表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。
1)、表单元素中出现了name="submit"的元素
这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(formElem.submit就是对该元素的引用)。
2)、elemForm.submit();不会触发表单的onsubmit事件
没有为什么,标准中就是这么规定的。
与此有些类似的是onfocus、onblur和focus()、blur()之间的关系却不同,调用elem.blur()或elem.focus()却会触发onblur和onfocus事件。
这些为我们提供了一个思路,在设计一些UI组件时,需要考虑一些事件在内部调用时是否要触发相关事件。例如Dialog组件,它具有onopen事件,同时返回的对象也会有open()方法,我们这时就必须考虑下open()方法是否需要触发onopen()事件。

====================================================================================================================================

最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,
在提交前触发这个button的onclick事件,在其事件中触发form的submit事件。问题出现了:
以下是出现相关代码:

  1. <form action="http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method="post" name="form1" οnsubmit="return alert('已提交!'); return false;">
  2. <table align="center" width="420px" cellPadding="2" cellSpacing="1" bgcolor="#A4B6D7"    style="word-wrap:Break-word;">
  3. <tr style="cursor: hand;background:#d7e3f6" >
  4. <td width="20%" align="right">条型码</td>
  5. <td><input style="width:90%" type="text" name="GOODSNUM"   size="30"  maxlength="8" ></td>
  6. </tr>
  7. <tr>
  8. <td align="center" colspan="2">
  9. <input type="button" name="save" value="保存" οnclick="if((confirm('确定要提交吗?'))) this.form.submit();"/>
  10. </td>
  11. </tr>
  12. </table>
  13. </form>

却发现并没有触发form的onsubmit事件,而是直接提交了。奇怪了,难道没有这种方式无法结合form的onsubmit方法吗?
仔细想了想,既然this.form表示form这个对象,那么肯定能获取到form的属性和方法的
,就改成 this.form.onsubmit();  成功!
我又查了查手册,原来submit的方法是这样解释的:
  The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.

意思是说submit这个方法是不触发onsubmit时间的,如果想要触发它,需要调用
fireEvent方法。尝试一下:this.form.fireEvent('onsubmit');哈哈,果然也成功!不过这样不是多此一举吗?呵呵!

就这个小问题也搞了我将近一个小时,不过为了以后不为这个问题烦恼,这也是值得的。
this.form.submit(); //直接提交表单,但是不调用form的onsubmit事件
this.form.onsubmit(); //调用form的onsubmit事件

this.form.fireEvent('onsubmit'); //同上,
     PS:又学到了fireEvent这个方法,

2.onsubmit()与submit() :

<html>
<script>
function fun()
{
   alert("form_submit");
}
</script>

<form οnsubmit="fun()">
<input type="submit" id="aaa" value="submit">   <!--能弹出form_submit-->
<input type="button" id="bbb" value="onCliCk_submit" οnclick="document.forms[0].submit()">
<!--
表单会提交,但是不会运行fun() 原因是 onsubmit事件不能通过此种方式触发(在IE环境)
直接用脚本doCumetn.formName.submit()提交表单是不会触发表单的onsubmit()事件的
-->
    <input type="button" id="bb1" value="onCliCk_onsubmit" οnclick="document.forms[0].onsubmit()"><!--会触发fun()参数,能弹出form_submit-->

</form>

</html>

</form>

form表单的submit()和onsubmit()的区别相关推荐

  1. form表单验证时的onsubmit事件

    form标签提交时,会触发onsubmit事件.onsubmit会在提交之前发生,所以验证可以写在onsubmit中. <!DOCTYPE html> <html> <h ...

  2. javascript中FORM表单的submit()方法经验教训.

    @author    songfeng             因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...

  3. form表单,submit,ajax提交

    尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...

  4. form表单的action和onsubmit事件说明

    首先 action在form是属性,onsubmit是事件. <form action="table1.jsp" onSubmit="return check(); ...

  5. 提交form表单方法

    ajax提交form表单,这在日常项目中是经常用到的.前台无论是简单的html.jsp或者使用了easyui框架,只要是提交表单一般都会使用到ajax. ajax提交表单分为两种: 1.无返回结果的, ...

  6. form表单提交三种方式,demo实例详解

    第一种:使用type=submit 可以直接提交 <html><head><title>submit直接提交</title></head>& ...

  7. 《uni-app》表单组件-form表单

    本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...

  8. 微信小程序form表单Cannot read property ‘detail‘ of undefined原因之一

    我利用form表单打算提交两个input框的内容,并在form的提交函数loginContainer里将input值赋给两个变量,如下图所示,在点击form button后出现了detail unde ...

  9. form表单提交FormData数据

    代码见https://gitee.com/bladeandmaster/freemarkerDemo 1.第一种直接使用form表单的submit提交 2.第二种采用ajax提交,需要设置conten ...

最新文章

  1. Cocos事件监听(JS)
  2. vivox3android系统,vivo X3手机系统是什么 vivo X3手机能升级安卓4.3
  3. mongodb复制集部署
  4. react打包后图片丢失_React中型项目的优化实践
  5. 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联等)
  6. Helixoft VSdocman 是一个集成于Visual Studio并提供了命令行版本的帮助文档编译工具...
  7. 朋友圈发图多大不会被压缩_类风湿会不会引发肾病?会!本文告诉你对内脏的伤害有多大...
  8. 08. 旋转数组的最小数字(C++版本)
  9. handlersocket mysql,MySQL插件HandlerSocket
  10. 尚硅谷ssm整合实战项目笔记
  11. HEVC(H.265)与AVC(H.264)的区别与联系
  12. 浏览器提示网站链接不安全,证书过期了
  13. java实现文件分割_java 实现文件分割
  14. linux网络编程面试题
  15. python基础训练—字符串
  16. 寒武纪MLU270 平台 CNStream 学习记录
  17. Java String类源码阅读笔记
  18. Spark的性能优化案例分析(下)
  19. php撮合引擎,C++ Match Engine撮合引擎 安装搭建(ubuntu)
  20. MAC10.15登录EasyConnect失败报“版本太低,请更新到最新版”

热门文章

  1. 电脑清灰记录(惠普暗影精灵5)
  2. 大学生数码装备推荐,2022年值得入手的数码好物
  3. 手写由链表设计的简易队列
  4. %2d、%6d(c语言)
  5. 川内计算机专业,川内大学计算机专业排名
  6. 超像素(slic算法)特征提取(颜色,纹理)——个人梳理
  7. 一个五年架构师凭什么基本年薪酬就可以达到50万
  8. libsvmpredict和svmtrain的参数和返回值
  9. 动态规划之01背包问题
  10. 简单粗暴的移动端图片浏览插件demo