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

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

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

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

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

  1. 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. HTTP协议发展历史

    一.HTTP 0.9版本 1991年发布0.9版本,只有一个 GET 命令. 例如:GET /index.html   表示浏览器只能接收返回 html 格式的字符串:服务器发送完毕就关闭tcp链接. ...

  2. Ooui:在浏览器中运行.NET应用 Ooui.Wasm:浏览器中的.NET

    在过去数年中,桌面应用开发人员一直处境艰难,因为人们的主要关注点聚焦于Web和移动应用.由于Microsoft未来Windows平台的计划未定,并且UWP应用也没有突破性进展,因此技术落伍的责任也不应 ...

  3. 分布式协调服务ZooKeeper工作原理

    分布式协调服务ZooKeeper工作原理 原创 2016-02-19 杜亦舒 性能与架构 性能与架构 性能与架构 微信号 yogoup 功能介绍 网站性能提升与架构设计 大数据处理框架Hadoop.R ...

  4. 修改System.Web.Mvc.WebViewPage创建自己的pageBase

    <system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, ...

  5. mysql操作索引的sql语句

    创建索引 一:唯一索引alter table table_name add unique index_name(column_list); 例如:alter table users_game_task ...

  6. Visual Studio - 安装VAX

    安装方法: 我的VS2013装D盘了,安装VA以后,把VA_X.dll替换到下面的程序路径中即可完成破解. C:\Users\Administrator\AppData\Local\Microsoft ...

  7. mysql update语句添加表关联查询

    UPDATE tab_game_version  as a INNER JOIN tab_game_version as b ON a.id=b.idSET a.advert_data=0 where ...

  8. linux应用time和timezone

    linux中应用层(非内核层)time是怎样处理的?时区是怎样设置的?夏令时时是怎样实现的?NTP时间同步是怎么回事?本篇文章就在嵌入式linux应用中time和timezone相关问题总结. 1. ...

  9. 查看网络连接数目(解决TIME_WAIT过多造成的问题_转)

      转自:解决TIME_WAIT过多造成的问题 (eroswang的csdn) #netstat -n | awk '/^tcp/ {++S[$NF]} END { for(a in S) print ...

  10. 理解Callable 和 Spring DeferredResult(翻译)

    1-介绍 Servlet 3中的异步支持为在另一个线程中处理HTTP请求提供了可能性.当有一个长时间运行的任务时,这是特别有趣的,因为当另一个线程处理这个请求时,容器线程被释放,并且可以继续为其他请求 ...