在 <...> 事件处理程序上引用 HTML 中的元素属性答案

【问题标题】：Referring to element properties in HTML on<...> event handlers在 <...> 事件处理程序上引用 HTML 中的元素属性
【发布时间】：2018-01-25 03:58:22
【问题描述】：

在 HTML 中使用事件处理程序内容属性时，根据specification，回调中this 的值是指事件的currentTarget 属性（下例中的input DOM 元素）。要访问 DOM 元素的属性之一，可以这样做：

<input type="text" onclick="console.log(this.type)"><!-- logs "text" -->

但是，当我在另一个问题上写answer 时，我有点意外地发现可以使用元素的非限定属性名称来引用它们的属性。以下内容已在当前版本的 Chrome 和 Firefox 中进行了测试：

<input type="text" onclick="console.log(type)"><!-- logs "text" -->
<input type="text" onclick="console.log(required)"><!-- logs "false" -->
<input type="text" onclick="console.log(tagName)"><!-- logs "INPUT" -->

现在，我的问题是：这种行为是否在某处指定？我似乎没有在 HTML specification 或 DOM UI events specification 中找到任何内容，而且我的 Google 搜索结果也是空的。

【问题讨论】：

标签： javascript html event-handling dom-events

【解决方案1】：

经过更多研究，我似乎在JavaScript: The Definitive Guide的第17.1.6节找到了答案。

这一切都归结为用于解析标识符的作用域链。对于定义在全局范围内的普通函数，在解析标识符x 时，运行时会首先在函数的本地范围内执行查找，如果失败，它将尝试在全局范围内查找。

对于 HTML 事件处理程序内容属性，作用域链是不同的。在尝试解析事件处理程序的本地范围内的标识符 (1) 后，JavaScript 将尝试在事件处理程序附加到的元素的范围内找到它 (2)，并继续向上层级 (3) 直到它到达全局范围 (4)。

<form>
    <!--1--><input id="a" type="text" onclick="var x = 'y'; console.log(x)" />
    <!--2--><input id="b" type="text" onclick="console.log(type)" />
    <!--3--><input id="c" type="text" onclick="console.log(b.id)" />
    <!--4--><input id="d" type="text" onclick="console.log(location.href)" />
</form>

根据前面提到的书，范围链的组成从未标准化，并且可能依赖于实现。

【讨论】：