Почему, если задать в <form> инлайновый обработчик события, то через него можно обратится к элементам формы по name?

#javascript #html #html5

Пример кода:  







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




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

Ответы

Ответ 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).


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


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


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

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

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


Ок, а где написано что в переменные формы попадают по 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.


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