以前没发现 form 表单这个特性

[waiaan]

<form>
    <input type="button" onclick="submit()" value="提交"/>
</form>

在 html 里写如上代码，未定义任何 submit 方法，点击按钮后 form 表单会直接提交。 如果覆写 form 元素自带的 submit 方法

HTMLFormElement.prototype.submit=function(){console.log(123)}

此时点击按钮后 form 表单不再提交，控制台打印出 123 。 chrome 、ff 、edge 会如此，ie11 不会，这是浏览器新功能还是规范里规定的？

[duke807]

一般不是應該給 onclick 賦值嗎

[mercury233]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
你这是把浏览器原生的 submit 函数覆盖了

[3dwelcome]

上课没认真听吧，VUE 里有专门 submit.prevent 属性，来阻止表单的默认提交行为。

[waiaan]

@mercury233
浏览器原生 submit 方法是挂载在 window 上的还是 HTMLFormElement 原型上的？
window 上的可以理解是全局函数，如果是 form 元素原型上的它是怎么调用的？还是说浏览器做了处理？

[waiaan]

@3dwelcome
见上面

[DoubleWu]

W3C 标准中有如下规定：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
译：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。
https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

[waiaan]

@DoubleWu
我这是一个按钮

[mercury233]

@waiaan 标准好像是下面这样规定的，浏览器的实现我就不清楚了
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm:dom-form-submit

[3dwelcome]

“就是这个 submit 方法，它是如何调用的。”

form 自古以来就有 onsubmit 方法啊。

和 onclick 一样，正常是挂载到 form 元素上的。

不是浏览器新功能，是远古功能。

[waiaan]

@3dwelcome
……我也没调用 onsubmit 方法，我调用的是没定义过的 submit 方法，它是怎么知道去找 form 的 submit 方法？

[waiaan]

@3dwelcome
这个 submit 方法也不是定义在 window 上的全局函数

[3dwelcome]

@waiaan 正常所有的 form 提交，都是需要走 submit 方法的。

也就是提到 form 元素的 onsubmit='console.log(123)'重载函数。

和你那句 HTMLFormElement.prototype.submit=function 是一个意思。

[misaka19000]

额，看傻了。。。在以前没有 Ajax 通过 JS 调用 HTTP 请求的年代，不都是通过这个 input 按钮来提交 form 表单的吗？这个有什么奇怪的。。。

[waiaan]

@3dwelcome
是这样没错，但是
```js
onclick="submit()"
```
这个点击事件的 submit 方法它是怎么调用到的，我代码里没有定义过它，它也不是全局函数，它怎么知道我是要提交表单呢？而且我自己再定义一个 submit 函数，这个函数也不会被这个点击事件调用。

[waiaan]

@misaka19000
唉，你和 12 楼这位都没看仔细我的代码和问题。
你说的自动提交是<input type="submit">这种

[codehz]

@3dwelcome onsubmit 是事件绑定（和 submit 方法没有直接联系

[3dwelcome]

你只指"<input type="button" onclick="submit()" value="提交"/>"

行为为什么会表现和<input type=''submit">一致？

我猜可能就是 onclick 里的 submit()吧。

[codehz]

关于楼主的这个问题，你可以把 onclick 改成 debugger ，然后开 F12 看一下，它实际上有多个 with 上下文
相当于所有在 onXXX 属性里执行的代码都会变成
with(document) {
with(form) {
with(input) { //以此类推，就是每个上级元素
xxx
}
}
}
的形式，我记得之前在 html spec 里看过，不知道哪位老哥可以给出引用

[3dwelcome]

@codehz “onsubmit 是事件绑定（和 submit 方法没有直接联系”

楼主这个 button 里 submit()函数方法，就是向上查找并调用了 form 里的 onsubmit 啊。

[waiaan]

@3dwelcome
17 楼说的没错，就是这个意思，因为我没有定义 submit 这个方法。
---
楼主这个 button 里 submit()函数方法，就是向上查找并调用了 form 里的 onsubmit 啊。
---
没太明白你说的向上查找是什么意思