没有getElementById引用成功的addEventListener()?

查看这个小提琴(下面的部分代码片段):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://*.com/a/3434388/2434324(yoelp提供的链接)

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

解决方法:

因为可以追溯到浏览器脚本编写的开始,IE决定使元素名称和ID成为引用该元素的全局变量.其他所有人都认为这是个坏主意,但并未这样做.

但是,IE占领了大约95%的浏览器市场,并且开发人员是为IE的古怪行为开发的,因此其他浏览器也实现了相同的行为,但没有进行广告宣传(与对document.all的支持相同).因此,现在所有浏览器都可以使用它,但是(几乎)没有人使用它.

除非有人偶然发现…

所以你有:

<button id='mybutton' ...>

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

上一篇:javascript-如何修复Firefox的窗口滚动事件侦听器?


下一篇:Js/事件处理