Code example:

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

Displays to console:

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

How it works? If the handler is hanged separately, then there is no such effect anymore.

  • Perhaps with such a record, this object takes one value, with another record another one ...? - CodeGust
  • In short, then "it is written somewhere in specs." But the specific lines of specs I google for about 15 minutes)) - Duck Learns to Take Cover nov
  • @ Moderately upsetting Still not written :) I also tried to find) There is a thought that this is somehow connected with form.elements - A. Gusev

1 answer 1

In order to answer the question, we need to understand:

  1. Why do inline handlers and regulars behave differently?
    Described in detail in this section of the specification.
    Inline handler, this is generally not a script yet, it has yet to be turned into a script. And how this is done is described in the specification here . Pay attention to point 10:

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

That is, in our lexical environment (in simple language, the variables available in the function), "variable forms" are suddenly mixed in here.

  1. What are these "variable forms" like ?
    Where does the name of the input come from in them if I did not write them directly in the form tag?

When you do say document.getElementById('someid') you get not just a line of html, but some strange thing that has unexpected properties.

So, this thing is a separate layer of abstraction. It is at this level that the "object" of the form is enriched with properties containing references to its associated controls (and all sorts of other useful things).

In the specification, if you need to know what will be in this object, you usually need to search for the keywords "IDL attributes". I once answered about them here , the truth is rather tongue-tied.

  1. Ok, and where is it written that the variable forms fall on the name?
    In the interface that the form must implement.
    Further on in the course of section 4.10.3 this is declared more fully.
    There is a special "human" explanation in the same section in the non-standard section:

form [name] Returns the form control; or, if there are none, returns the img element with the given ID.

Once an element has been used, it has been referenced using the document.

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

Who would have told me about five years ago that I would read with a huge interest for the night html spec, I would have twisted my wing at my temple.

  • Thank you very much for such a detailed response. I'm not so experienced to immediately understand the descriptions of specifications, but I want to understand how everything works at a lower level :) And the first point is not very clear. Those. Are all the properties that are available on this. Property become environment variables for inline handlers? - A. Gusev Nov.
  • one
    @ A.Gusev, generally speaking no. This paragraph talks about creating a handler function. The value of this is determined during the call of this function (although it also depends on the method of creation). It says about the variables available inside the function, LexicalEnvironment. It is not related to this in general terms, although it may be related to some private functions. It is necessary to find a section of the specification which refers to the call of handlers, and smoke in the appropriate section of js-specs. Well, that is, these are two different entities, understanding how they are related in fact worthy of a separate issue of kmk. - Duck Learns to Take Cover