Why are element attributes displayed in an inline function area?

Question

Given this code:

<button id="blah" onclick="alert(id)">Click me</button> 

Pressing the button will warn "blah". Why does the id attribute become a variable visible within the onclick handler?

Another example:

 <button style="font-size:200%" onclick="console.log(style)">Click me</button> 

Here we see that style refers to the CSSStyleDeclaration object, not the attribute string value. This is similar to what we would get by specifying the property index of an attributes button element or through attribute properties such as this.style ( getAttribute will return a string value instead).

Where is this behavior indicated?

http://jsfiddle.net/b8mpJ/

Answer 1

Because it is specified in the web application API. Quoting whatWG Living Standard :

When the user agent needs to get the current value of the event handler H, it must perform the following steps:

[...] Using the script runtime obtained above, create a function object with:

[...] Lexical environment

• Let Scope be the result of NewObjectEnvironment (document, global environment).

• If the form owner is not null, let Scope be the result of NewObjectEnvironment (> form owner, Region).

• If the element is not NULL, let Scope be the result of NewObjectEnvironment (element, Scope).

NewObjectEnvironment () is defined in ECMAScript edition 5 section 10.2.2.3 . You probably probably know better its effect from with the message (where it was also used). In other words, the properties of the target element are also checked when looking for the binding of a specific name in the event handler function.

Answer 2

I'm not sure where this is indicated, but what happens is that your handler is called with the this variable set for this element. This is why attributes are visible, since id can be seen as an abbreviated form of this.id