为何输入框onchange事件中调用submit()会触发表单提交？

我发现以下代码在输入框内容改变时会触发表单提交：

<form>
    <input type="text" onchange="submit();">
</form>

我之前一直认为必须这样写才能实现：

<form>
    <input type="text" onchange="this.form.submit();">
</form>

实际测试中，this.form.submit(); 和 submit(); 的效果完全相同（至少在Chrome浏览器中是这样）。但<input> DOM元素本身并没有定义submit()方法，为什么直接调用submit()也能正常生效？我需要明确的原理，而非“浏览器魔法”这类模糊的解释。

实际原理解析 #

这不是什么“浏览器魔法”，而是HTML规范明确规定的行为：

• 当在HTML元素的事件属性（比如onchange）中编写代码时，这段代码的执行作用域会自动包含当前元素所属表单对象的属性和方法。
• 也就是说，处于表单内的输入框，它的事件代码里直接写submit()时，浏览器会自动定位到它所在的<form>元素的submit()方法并执行，效果和显式写this.form.submit()完全一致。
• 之所以会产生疑惑，是因为<input>本身确实没有submit()方法，但浏览器为了简化表单内控件的事件处理，特意扩展了事件代码的作用域，让控件可以直接访问父表单的方法，无需手动通过this.form引用。

内容的提问来源于stack exchange，提问作者Akerus