为什么可以在内联事件处理程序中访问表单值？

Question

I just realized在表单事件处理程序（例如onsubmit或oninput等）中，您可以全局访问控制值，这意味着以下内容确实有效：

<form onsubmit="alert(theInput.value); return false">
  <input name="theInput">
</form>

为什么这样做？我从未在任何地方定义theInput，它也不是全局变量。

假设内部浏览器代码自己分配了这些变量，为什么我不能在自定义事件处理程序中访问theInput？

function submitHandler() {
  alert(theInput.value)
}

<form onsubmit="submitHandler(); return false">
  <input name="theInput">
</form>

在submitHandler()中，theInput未定义，并且代码中断，正如我期望的那样。

是否有关于此的任何文档？找不到任何东西，但是诚然很难找到它。 MDN文档甚至在one of their examples中使用此语法。

Answer 1

内联处理程序（不直观地）似乎在with(this)内部运行，其中this是处理程序所在的元素：

<form onsubmit="debugger; console.log(theInput.value); return false">
  <input name="theInput">
  <button>submit</button>
</form>

document也已with。

在<form>中，您可以通过点表示法访问具有特定名称的输入，因此引用theInput.value的工作原理与在内联处理程序中引用this.theInput.value一样。

解决方案：永远不要使用内联处理程序，它们很疯狂。

Answer 2

这可以帮助您：

3个解决方案：

1. 使用Function构造函数
2. 将变量分配为元素的属性
3. 使用范围记住局部变量的实例

在这里阅读更多，希望对您有帮助，干杯！

http://www.howtocreate.co.uk/referencedvariables.html

Answer 3

似乎浏览器正在幕后分配theInput。它在第二种情况下不起作用的原因是，您正在theInput函数的范围内而不是实际事件处理程序的范围内寻找submitHandler。如果您在HTML theInput中将submitHandler传递到onsubmit中，即使您在submitHandler中更改了变量名，它也可以工作。

function submitHandler(input) {
  alert(input.value)
}

<form onsubmit="submitHandler(theInput); return false">
  <input name="theInput">
</form>

此外，如果将submitHandler(theInput)更改为其他名称，操作将失败，请参见下文：

function submitHandler(input) {
  alert(input.value)
}

<form onsubmit="submitHandler(myInput); return false">
  <input name="theInput">
</form>