How is the scope of an Event Listener defined in any attribute in HTML created?

Question

According to the documentation, when the Listener event is assigned as an HTML attribute, the specified code (in the attribute value) is wrapped in a function, with the following parameters:

• event - for all attributes except onerror;
• event, source, lineno, colno, and error - for onerror.

The this function is defined as the HTML element that contains the event attribute.

---

However, another question here on Sopt (now deleted^[1]) made me curious because accesses the variable value inside one of these attribute handlers. Thus:

<input onkeyup="console.log(value)" />

Checking if there is one more argument, to my surprise, no. Really, as you put the documentation, only event is passed (since it is a Event attribute that is not onerror):

<input onkeyup="console.log([...arguments])" />

<!-- Escondi o console do snippet porque são muitas propriedades.
     Abra e veja no próprio console do navegador. -->

After further investigation, I realized that all properties of Event.target are also in scope. I stress that value is a property of that object.

So it seems to me there’s something like a with(event.target) somewhere, but that’s an assumption and there’s no confirmation. It is undoubtedly detail of implementation, since the exposure of these values can be done in another way. The problem is that, seeing the source of the executed function, there is nothing but the parameter event:

<input onkeyup="console.log(arguments.callee.toString())" />

I ask you:

• How this happens (how is created the scope of this attribute Event Listener)?
• This is specified?
• In addition to (apparently) all properties of Event.target are available, I can access some more value?
• What is the support for this in the browsers?

Answer 1

TL;DR

The element containing the attribute Listener is used to derive the scope of the function that will be executed. That’s why the element properties (such as textContent, value etc) can be accessed directly - because they are literally part of the scope of function.

_{I point out that this answer is only for attribute Event handlers (that is, those defined directly in attributes in HTML). Events added via addEventListener function (similarly) differently. There is no modification of the scope of the function passed to the second argument of addEventListener.}

---

Each event to be heard in the browser has a struct associated, called Event Handler^[1], containing a field listener (which corresponds to the hearer event) and other field, value. For events added via attributes in HTML, the value that struct corresponds to what the specification calls Internal raw uncompiled Handler.

That one Internal raw uncompiled Handler is a tuple contains the following information: ^[2]

• The body of the script (not compiled - "uncompiled"), which is the code that is inserted in the attribute value.
• The location from which the script originated, in case an error needs to be reported.

Since the Listener is triggered, the browser performs the evaluation (compilation) of the script, which will be used for the creation of the function callback (which will be executed). For the creation of this function, account shall be taken of this algorithm ^[3], which makes use of the internal operation OrdinaryFunctionCreate (of Ecmascript).

To OrdinaryFunctionCreate is an internal Ecmascript operation with the following signature:

OrdinaryFunctionCreate (functionPrototype, ParameterList, Body, thisMode, Scope)

It is used to create the function callback. For this, the following arguments are passed:

• functionPrototype is the Function.prototype (we are already familiar with this prototype with the other functions of Javascript, which also assume it).

• ParameterList in the case of events that are not errors (such as onclick, onkeydown etc), corresponds to event.

• Body the body of the function is generated dynamically through concatenations with the event name and the body. It is basically:

  function <<name>>(event) {
  <<body>>
  }
  

  ^{In which <<name>> is the name of the function callback associated with the event (as onclick) and <<body>> is the Javascript code added to the event attribute in HTML.}

• thisMode is going on "non-lexical-this".

• Scope The scope is defined as follows::

  • Initially, the object scope document;
  • If the element possessing the attribute Event Listener is within a form (has a form Owner), the subject of the form also is incorporated into the ecopo;
  • If the element possessing the attribute Event Listener is non-null, the object of that element also is incorporated into the scope.

Thus, one can affirm that the scope arises through this triple derivation (document → form owner → eventTarget). That is why, entirely, the scope will not be equal to this.

See the full algorithm to learn more.

Once the function callback is created, it is executed. For this invocation, the this is defined as the element containing the Event attribute^[4].

---

Completion

We therefore conclude that values such as value, textContent (and all other properties present in the element that activated the event) are accessible "directly" this way because they are scope of function callback created by the browser. The scope concept is explained on MDN.

Do not confuse scope with this, which, roughly speaking, is just another name of the scope of a function.

Even if the "this implicit" is possible in Javascript (what is not), the following example demonstrates why this is not the case (there is a difference between the this and the value of the scope):

<form>
  <button type="button" onclick="
    console.log({
      this_elements: typeof this.elements,   // undefined
      scoped_elements: typeof elements,      // object
      
      are_eql: this.elements === elements    // false
    })
  ">
    Clique
  </button>
</form>


    <h3>Explicação</h3>
    Mesmo que fosse possível em JavaScript, o "<code>this</code>
    implícito" não poderia ocorrer nessa situação, já que há uma
    evidente (demonstrada acima) diferença de valores.

    O escopo da função, criado a partir do documento, formulário
    pai (se presente) e, enfim elemento associado ao
    <em>attribute event</em>, é diferente do <code>this</code>
    da função, que corresponde (ao contrário do escopo)
    unicamente ao elemento associado ao <em>attribute event</em>.

This happens because when the function callback (created as explained above) is invoked, its this is defined as the element containing the attribute Event Listener. Already the scope (defined during the creation of this function callback) is created from the derivation of the object document, of form Owner (if present) and the event element itself. They are therefore different.

---

How does this happen?

Explained above.

This is specified?

Yes. References to the specification are in the text.

In addition to (apparently) all properties of Event.target are available, I can access some more value?

Actually (contrary to what I initially thought), it is not the event.target which is "placed" as a scope, but rather the element containing the Event attribute (the element associated with the event). O event.target will not always correspond to him.

What is the support for this in the browsers?

The browsers that follow the specification implement this and therefore support what has been discussed here. The implementation varies between host, since the specification does not bother to dictate how to do, but yes what to do.

---

Reference

• Ecmascript® 2020 Language Specification
• Section "Events" of HTML Standard
• Why is there no implicit this in Javascript