4

Пример кода:

<form onkeydown='console.log(name)'>
<input type='text' name='name' value='Василиса'>
<input type='text' name='age' value='secret'>
</form>

Выводит в консоль:

<input type="text" name="name" value="Василиса">

Как это работает? Если обработчик повесить отдельно, то такого эффекта уже нету.

3
  • Возможно, при такой записи, объект this берет одно значение, при другой записи - другое...?
    – CodeGust
    28 ноя 2016 в 20:57
  • Если вкратце, то "так написано где-то в спеке". Но конкретные строчки спеки я гуглю уже минут 15)) 28 ноя 2016 в 20:58
  • @УмеренноУпоротаяУтка Еще бы не написано:) Я тоже пытался найти) Есть мысль что это как-то связано с form.elements
    – A. Gusev
    28 ноя 2016 в 21:02

1 ответ 1

4

Для того, чтобы ответить на вопрос, нам надо понять:

  1. Почему инлайн обработчики и обычные ведут себя по разному?
    Подробно описано в этом разделе спецификации.
    Инлайн обработчик, это вообще говоря еще не скрипт, в скрипт его еще предстоит превратить. И как это делается - описано в спецификации вот здесь. Обратите внимание на пункт 10:

Lexical Environment Scope
1. Let Scope be the result of NewObjectEnvironment(document, the global environment).
2. If form owner is not null, let Scope be the result of NewObjectEnvironment(>form owner, Scope).
3. If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).

То есть в наше лексическое окружение (простым языком - переменные доступные в функции) внезапно подмешиваются "переменные формы" именно здесь.

  1. Что это такое за "переменные формы" такие?
    Откуда в них берутся имена инпутов если я не писал их прямо в теге form?

Когда ты делаешь скажем document.getElementById('someid') то получаешь не просто строчку html же, а некоторую странную штуку у которой бывают неожиданные свойства.

Так вот, эта штука - это отдельный слой абстракции. Именно на этом уровне "объект" формы обогащается свойствами, содержащими ссылки на связанные с ним контролы (и всякими другими полезными вещами).

В спецификации если нужно узнать что в этом объекте будет - обычно нужно искать по ключевым словам "IDL attributes". Я про них когда-то здесь отвечал, довольно косноязычно правда.

  1. Ок, а где написано что в переменные формы попадают по name?
    В интерфейсе который должна реализовывать форма.
    Дальше по ходу раздела 4.10.3 это декларируется более развернуто.
    Есть специальное "человеческое" пояснение в том же разделе в ненормативной секции:

form[name] Returns the form control (or, if there are several, a RadioNodeList of the form controls) in the form with the given ID or name (excluding image buttons for historical reasons); or, if there are none, returns the img element with the given ID.

Once an element has been referenced using a particular name, that name will continue being available as a way to reference that element in this method, even if the element’s actual ID or name changes, for as long as the element remains in the Document.

If there are multiple matching items, then a RadioNodeList object containing all those elements is returned.

Кто бы мне сказал лет пять назад, что я буду с огромным интересом на ночь читать хтмл спеку - я бы покрутил крылом у виска.

2
  • Спасибо большое за такой развернутый ответ. Я не настолько опытный чтобы сразу понимать описания спецификаций, но хочется понимать как все работает на более низком уровне :) И по первому пункту не очень ясно. Т.е. все свойства что доступны по this.свойство, становятся переменными окружения для инлайн обработчиков?
    – A. Gusev
    29 ноя 2016 в 9:58
  • 1
    @A.Gusev, вообще говоря нет. В этом пункте говорится про создание функции-обработчика. Значение this определяется во время вызова этой функции (хотя от способа создания тоже зависит). Здесь говорится про скоуп переменных доступных внутри функции, LexicalEnvironment. Он в ощем с this не связан, хотя в каких-то частных функциях может быть связан. Надо найти раздел спецификации в котором говорится о вызове обработчиков, и закурить в соответствующий раздел js-спеки. Ну то есть это две разные сущности, понимание как они связаны по факту достойно отдельного вопроса кмк. 29 ноя 2016 в 10:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.