在＆lt; ...＆gt;上引​​用HTML中的元素属性事件处理程序

Question

在HTML中使用事件处理程序内容属性时，根据specification，回调中this的值是指事件的currentTarget属性（{{ 1}}以下示例中的DOM元素）。要访问DOM元素的某个属性，可以按如下方式完成：

input

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在，我的问题是：这个行为是在某处指定的吗？我似乎无法在HTML specification或DOM UI events specification中找到任何内容，而且我的Google搜索也显示为空。

Answer 1

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

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

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

根据上述书，范围链的构成从未标准化，可能依赖于实现。