javascript - 没有 getElementById 引用成功的 addEventListener()？

Question

查看此 fiddle (下面的部分代码片段):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()？

//答案更新//////////////////////////////////////////////////////////////////

经过一些研究，上面讨论的行为似乎实际上是 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

Answer 1

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

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

除非有人偶然发现它......

所以你有:

<button id='mybutton' ...>

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