Почему можно получить доступ к значениям формы во встроенном обработчике событий?

Question

Я только что понял, что внутри обработчика событий формы (как 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 даже используют этот синтаксис в одном из своих примеров.

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

Похоже, браузер назначает theInputза кулисами. Причина, по которой он не работает во втором случае, заключается в том, что вы ищетеtheInput в рамках submitHandlerфункция, а не область действия фактического обработчика событий. Работает, если вы пройдетеtheInput в submitHandler в вашем HTML 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>

Answer 3

Это может помочь вам:

3 решения:

1. Использование конструктора функций
2. Присвоение переменных как свойств элемента
3. Использование области видимости для запоминания экземпляров локальных переменных

Читайте больше здесь, надеюсь, это поможет вам, ура!

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