做表单的时候发现一个奇怪的地方,总结下:

form.submit 方法 并不会触发 form.onsubmit 事件,看代码:

<body>
<div class="container">
<form action="http://route.showapi.com/213-1" method="POST">
<input type="text" value="ssss">
<button type="submit">提交</button>
</form>
</div>
<script>
var form=document.forms[0];
var btn=form.getElementsByTagName('button')[0];
form.onsubmit=function(event){
var e = event||window.event;
alert(e);
};
        form.submit();
</script>
</body>

如题,一打开网页,并没有 alert() ,而是直接提交表单了,也就是说,form.submit 方法 并不会触发 form.onsubmit 事件 ,FF 和 chrome 测试都一样,解决办法:

把 form.submit(); 改成提交按钮的 click 事件,上题就是把最后一句代码改成:

btn.click();

可能有的人不想这么做,会想把 form.submit() 改成 form.onsubmit() ,但是这个逻辑就错了,不信你试试???

解析:fomr.submit() 是在调用 form 的 submit 方法(默认的方法),而 form.onsubmit() 是在调用 form 的 onsubmit 方法(你在前面指定的),这个时候就获取不到 event 对象了,获取的 undefined

但是如果不是 submit 事件,换成 click 倒是正常的,所以这个特例需要注意下,如果有人发现原因了,感谢告知呀 !

form.submit 方法 并不会触发 form.onsubmit 事件的更多相关文章

  1. asp.net form submit 在Chrome里面看Form提交

    Chrome中查看 request  form data 在Fiddler中查看

  2. form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器。

    在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的on ...

  3. form submit 的callback方法

    参考:http://hayageek.com/jquery-ajax-form-submit/ form的submit方法返回数据处理. 普通的form: $("#ajaxform" ...

  4. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  5. javascript form提交 不执行onsubmit事件解决方案

    转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...

  6. 实现同时提交多个form(基础方法) 收集(转)

    方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  7. 实现同时提交多个form(基础方法) 收集

    实现同时提交多个form(基础方法) 收集 分类: 1.2-JSP 1.3-J2EE 1.1J2se 1.0-Java相关2011-12-01 20:59 1644人阅读 评论(0) 收藏 举报 bu ...

  8. <input type = "submit"> 提交方式和用js的form.submit()有什么区别?

    假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B表单内没有<input type="submit&qu ...

  9. django form POST方法提交表达

    之前就着手开始尝试用django来简化web开发的流程周期,果不其然,速度还行,当然前期的产品那就相当粗糙了.举例来说,就连最基本的登录都是抄别人的,最可怕的是用GET方法提交表单,今天就尝试解决这个 ...

随机推荐

  1. Linux 网卡丢包严重

    http://hi.baidu.com/scstwy/item/cad0fbef1fdc18d3eb34c9d9

  2. bootstrap学习笔记一 登录水平表单

    先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...

  3. python selenium --命令之文字范本匹配

    文字范本匹配 ======================================= 文字范本匹配其实可以理解为通配符.我想大家都用过windows 系统自带的搜索功能. *   星号代表一个 ...

  4. 点滴积累【JS】---JS小功能(JS实现侧悬浮浮动)

    效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscrol ...

  5. Java中的四种引用类型,强引用,软引用,弱引用,虚引用

    对于Java中的垃圾回收机制来说,对象是否被回收的标准在于该对象是否被引用.因此,引用也是JVM进行内存管理的一个重要概念. Java中对象的引用一般有以下4种类型: 1强引用  2软引用  3弱引用 ...

  6. 热烈祝贺阿尔法Go首战告捷

    这是人类的一大杰作和进步.一个国家和民族的未来在科技,靠造房子是成不了科技强国的. 当然,也要祝贺一下北上深房价突破历史高位.这也是伟大而不朽的成果.

  7. JAVA工具类 UUID

    UUID:通用惟一识别:Universally Unique Identifier: 在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的. GUID是一个128位长的数字,一般用16进制 ...

  8. JS高程3:事件

    事件是JS和HTML交互的方式. 事件流 事件流是HTML文档接收事件的顺序.分为2个流派:事件冒泡流和事件捕捉流. 事件冒泡流 由内到外 事件捕捉流 由外到内 DOM事件流 事件处理程序 跨浏览器时 ...

  9. maven学习资料

    maven学习资料 maven学习教程:What.How.Whyhttp://www.flyne.org/article/167 Maven 那点事儿 https://my.oschina.net/h ...

  10. php中Http请求方法和响应状态码整理教程

    HTTP请求报文由请求行(request line).请求头部(header).空行和请求数据4个部分组成,格式如下 可见请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格 ...