addEventListener() 没有 getElementById 参考成功？答案

【问题标题】：addEventListener() without getElementById reference success?addEventListener() 没有 getElementById 参考成功？
【发布时间】：2013-05-25 08:49:05
【问题描述】：

看看这个小提琴（下面的部分代码sn-p）：http://jsfiddle.net/QJJb8/

<button id='mybutton'>MY BUTTON</button>

mybutton.addEventListener('click', mybuttonClick, false);

function mybuttonClick(e){
    alert(e.target.textContent+' WAS CLICKED!');
}

请注意我没有使用 getElementById() 来获取对按钮的引用。为什么它仍然有效？（在 Firefox、Chrome 和 IE9 & 10 中测试。）

这是不好的做法/怪癖，还是按钮元素的内置功能？如果是后者，那么在使用按钮元素时这是一个很棒的特权/快捷方式！还是我一直在过度使用 getElementById()？

//回答更新//////////////////////////////////// /////////////////////////p>

经过一些研究，似乎上面讨论的行为实际上是 HTML5 规范的一部分。除了下面 RobG 的回答之外，另请参阅以下链接以获取更多信息：

http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/

https://stackoverflow.com/a/3434388/2434324（链接由 yoelp 提供）

http://jsperf.com/named-access-on-the-window-object

【问题讨论】：

之所以有效，是因为您从单击事件侦听器（即“e”参数）中获取了对按钮本身的引用，然后您将使用它来显示按钮的文本
@FilipposKarapetis——但不添加监听器。
@FilipposKarapetis - 实际上，我的具体问题是在它到达“e”事件侦听器之前 - 为什么该函数首先起作用？注意 mybutton 没有在任何地方声明。它在 HTML id 中给出，然后直接引用：mybutton.addEventListener（没有 getElementById）。

标签： javascript button getelementbyid addeventlistener

【解决方案1】：

因为早在浏览器脚本开始时，IE 就决定让元素名称和 ID 成为引用该元素的全局变量。其他人都认为这是一个坏主意（确实如此）并且没有这样做。

然而，IE 占据了大约 95% 的浏览器市场，开发人员为 IE 的怪癖而开发，因此其他浏览器实现了相同的行为但没有宣传它（对 document.all 的支持也是如此） .所以现在所有的浏览器都这样做了，但是（几乎）没有人使用它。

除非有人偶然发现它……

那么你在哪里：

<button id='mybutton' ...>

浏览器创建一个引用该元素的全局 mybutton 变量。

【讨论】：

有趣 - 所以这是不好的做法？对于这么长的 document.getElementById() 选择器来说，这似乎是一个很棒的捷径。我想如果没有它的规范，我可能最好不要将它用于面向未来的测试......真可惜？
我相信最初的开发人员就是这么想的。但是您真的希望 every 元素 ID 和名称成为全局变量吗？这极大地增加了名称冲突的范围。此外，声明的全局变量优先于元素 ID 和名称，因此事情会变得非常混乱。
是的，可能不是每个元素ID...但是对于按钮元素，您几乎总是需要一个参考...可能很方便！无论如何，我会坚持使用 OG getElementById 方法，直到我听到规范添加...再次感谢。
有趣的部分是在这些特征上下降的沉默锥。它们从根本上被认为是糟糕的，但没有浏览器开发人员会因为害怕破坏 15 年前编写的代码而将它们删除。这个想法似乎是，如果它们被忽略，它们就会消失……

【解决方案2】：

这适用于所有 DOM 元素，不仅是按钮，这可能是一种不好的做法，因为任何人都可能将 mybutton 更改为其他东西（即mybutton = "BLABLA"），然后您的代码就会中断

另见this

【讨论】：

感谢 yoelp 的信息和链接 - 非常有帮助