form.submit 方法 并不会触发 form.onsubmit 事件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了form.submit 方法 并不会触发 form.onsubmit 事件相关的知识，希望对你有一定的参考价值。

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

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 事件的主要内容，如果未能解决你的问题，请参考以下文章

form.submit() 将在表单内触发 double

等待 form.submit() / POST 完成

jQuery Validate：submitHandler 提交表单而不点击 form.submit

jquery.validate不用submit提交，用js提交的怎么触发验证

使用 form.submit() 时出错

ajaxfileUpload.js 中jQuery(form).submit(); ie后没有到去后台，其他浏览器都可以，为啥