查看此 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 提供)
最佳答案
因为早在浏览器脚本开始时,IE 就决定将元素名称和 ID 设为引用该元素的全局变量。其他人都认为这是个坏主意(确实如此),并没有这样做。
但是,IE 占据了大约 95% 的浏览器市场,开发人员针对 IE 的怪癖进行了开发,因此其他浏览器实现了相同的行为但没有对其进行宣传(与支持 document.all 相同) .所以现在所有浏览器都这样做,但(几乎)没有人使用它。
除非有人偶然发现它......
所以你有:
<button id='mybutton' ...>
浏览器创建一个引用该元素的全局 mybutton 变量。
关于javascript - 没有 getElementById 引用成功的 addEventListener()?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16824968/