为什么元素的属性出现在内联函数的范围内？

Question

鉴于此代码:

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

单击该按钮将发出"blah"警告.为什么id属性成为onclick处理程序范围内可见的变量？

另一个例子:

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

这里我们看到style引用一个CSSStyleDeclaration对象,而不是属性的字符串值.这类似于我们通过引用button元素attributes属性的索引或通过属性属性this.style(getAttribute将返回字符串值)来获得的内容.

指定了这种行为在哪里？

http://jsfiddle.net/b8mpJ/

Answer 1

因为它是在 Web 应用程序 API 中指定的。引用WG的生活标准：

当用户代理要获取事件处理程序 H 的当前值时，它必须运行以下步骤：

[...]使用上面获得的脚本执行环境，创建一个函数对象：

[...]词汇环境范围

• 令 Scope 为 NewObjectEnvironment(文档，全局环境) 的结果。

• 如果表单所有者不为空，则令 Scope 为 NewObjectEnvironment(>表单所有者, Scope) 的结果。

• 如果 element 不为 null，则令 Scope 为 NewObjectEnvironment(element, Scope) 的结果。

NewObjectEnvironment() 在 ECMAScript 第 5 版第 10.2.2.3 节中定义。您可能可以通过with语句（也使用它）更好地了解其效果。换句话说，当在事件处理程序的函数中查找特定名称绑定时，也会检查目标元素的属性。