要素の属性がインライン関数のスコープ内に表示されるのはなぜですか？

Question

は、このコードを考える：

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

ボタンをクリックすると、 "何とか" を警告します。 id属性がonclickハンドラの範囲内で変数になるのはなぜですか？

もう一つの例：ここでは

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

たちはstyleではなく、属性の文字列値よりも、CSSStyleDeclarationオブジェクトを指していることがわかります。これは、（getAttributeではなく、文字列値を返します）私たちは、ボタン要素のattributesプロパティのインデックスを参照することにより、またはthis.styleなどの属性プロパティを介して取得したいものと同様です。

この動作はどこで指定されていますか？それはWebアプリケーションのAPIに指定されていますので

http://jsfiddle.net/b8mpJ/

Answer 1

。ユーザエージェントは、イベントハンドラHの現在の値を取得する場合、それはこれらの手順を実行する必要があります

：whatWG's Living Standardを引用

[...]上記で得られたスクリプト実行環境を使用して、作成関数オブジェクト：

[...] 字句環境スコープ

• スコープがNewObjectEnvironmの結果としますent（文書、地球環境）。

• フォーム所有者がnullでない場合、スコープはNewObjectEnvironment（>フォームの所有者、スコープ）の結果であるものとします。要素がnullでない場合

• は、スコープNewObjectEnvironment（素子、スコープ）の結果であるものとします。

NewObjectEnvironmentは（）のECMAScript 5版section 10.2.2.3に定義されています。あなたはおそらくwithステートメント（それがよく使われている）からその効果を知るかもしれません。つまり、イベントハンドラの関数で特定の名前のバインディングを検索するときに、ターゲット要素のプロパティもチェックされます。

Answer 2

私は、それが指定されている場所がわからないんだけど、何が起こっていることはあなたのハンドラは、要素にthis変数セットで呼び出されていることです。そのため、idは、this.idの省略形として見ることができるため、属性が表示されます。