Question

查看此小提琴（下面的部分代码段）：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＆amp; 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 变量。

Answer 2

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

另见this

addEventListener（）没有getElementById引用成功？

2 个答案: