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

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. excel合并单元格

    最简单的: =A1&B1&C1 在C14单元格中输入公式:=CONCATENATE(A14,"@",B14,".com"),确认后,即可将A14 ...

  2. bootstrap学习笔记 Bootstrap 列表组

    本文将介绍列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素ul 添加class list-group 向li添加class list-group-ite ...

  3. 全面进攻python之前回顾下自己近三个月的自学之路

    人生是在一直试错的过程中成长起来的.这句话貌似很有道理,但回顾了下自己近三个月python自学学习之路,又觉得自己对这句话又有了新的看法------行动之前必须要有正确的选择,这样做错了才能成长. 2 ...

  4. android 屏幕适配原则

    屏幕大小 1.不同的layout Android手 机屏幕大小不一,有480x320,640x360,800x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的 ...

  5. XML - 十分钟了解XML结构以及DOM和SAX解析方式

    引言 NOKIA 有句著名的广告语:"科技以人为本".不论什么技术都是为了满足人的生产生活须要而产生的.详细到小小的一个手机.里面蕴含的技术也是浩如烟海.是几千年来人类科技的结晶, ...

  6. ML中Boosting和Bagging的比較

    说到ML中Boosting和Bagging,他们属于的是ML中的集成学习,集成学习法(Ensemble Learning) ①  将多个分类方法聚集在一起.以提高分类的准确率. (这些算法能够是不同的 ...

  7. Atitit .h5文件上传 v3

    Atitit .h5文件上传 v3 1. 上传原理1 2. V3版新特性1 3. Html1 4. Js2 5. uploadV2.js2 6. upServlet & FileUploadS ...

  8. Effective JavaScript Item 37 认识this的隐式指向

    本系列作为Effective JavaScript的读书笔记. CSV数据通常都会被某种分隔符进行分隔.所以在实现CSV Reader时,须要支持不同的分隔符.那么,非常自然的一种实现就是将分隔符作为 ...

  9. Web前端的状态管理（State Management）

    背景 我相信很多朋友跟我一样,初次听到什么Flux, Redux, Vuex,状态管理的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火爆后,什么Flu ...

  10. Monotone Chain Convex Hull(单调链凸包)

    Monotone Chain Convex Hull(单调链凸包)算法伪代码: //输入:一个在平面上的点集P //点集 P 按 先x后y 的递增排序 //m 表示共a[i=0...m]个点,ans为 ...