Question

在Javascript事件委派https://javascript.info/event-delegation的一个非常常见的代码示例中，我对变量＆＃34; menu＆＃34;的位置感到困惑。来自http://plnkr.co/edit/91Q9jINXlue2fXiB0fAY?p=preview的第40行。变量传递给构造函数，但从未初始化。它似乎是变量＆＃34; menu＆＃34;自动从这个div元素创建：

<div id="menu">...</div>
<script>
...
new Menu(menu); /* Who initializes "menu".
...
</script>

我已经做了很长时间的Javascript但这对我来说真的很困惑。我也不确定如何概括这个问题。

通常我会做一个document.getElementById（＆＃34; menu＆＃34;）来获取div元素。这些变量在哪里被初始化，我怎样才能找到更多关于这些变量的信息呢？有规格吗？

Answer 1

我将元素的值与id相同。

<div id="menu">

由[Web超文本应用技术工作组（WHATWG）]指定：（https://html.spec.whatwg.org/#named-access-on-the-window-object）

7.3.3 Window对象
上的命名访问权限
window[name]
返回指定的元素或元素集合。

作为一般规则，依赖于此将导致代码脆弱。例如，随着新功能添加到Web平台，哪些ID最终映射到此API可能会随着时间的推移而变化。而不是使用document.getElementById()或document.querySelector()。

Answer 2

它来自这一行：

<div id="menu">...</div>

浏览器将DOM元素公开为全局变量，其名称对应于其id属性。这不是很好的做法，但建议避免它，因为它很容易出错并且容易混淆。

Answer 3

此变量由浏览器和窗口元素的成员自动生成。

HTML5标准指定窗口对象必须具有属性 key ，其值为elem if ...

只有一个DOM元素 elem ，其属性id的值为 key 。
只有一个DOM元素 elem ，其属性name的值为 key 。 elem的标记必须是以下之一：a，applet，area，embed，form，frame，frameset，{ {1}}，iframe，img。

可以在此处找到规范：https://html.spec.whatwg.org/#named-access-on-the-window-object

从DOM元素初始化的Javascript中的全局变量的规范？

3 个答案: