addEventListener()没有getElementById参考成功？

Question

addEventListener()没有getElementById参考成功？

javascriptbuttongetelementbyidaddeventlistener

3

请查看这个 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＆amp; 10中测试。）

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

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

经过一些研究，似乎上述讨论的行为实际上是HTML5规范的一部分。除了下面RobG的答案外，还可以参考以下链接以获得更多见解：

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

https://dev59.com/-3A75IYBdhLWcg3wK1wp#3434388（由yoelp提供的链接）

该链接提供了有关编程相关内容的信息。

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

- calipoop

它能够工作是因为你从点击事件监听器（即“e”参数）获取了对按钮本身的引用，然后使用它来显示按钮的文本。 - Filippos Karapetis

@FilipposKarapetis - 但不要添加监听器。 - RobG

@FilipposKarapetis - 实际上，我的具体问题是在它甚至到达“e”事件监听器之前 - 为什么函数能够起作用？请注意，mybutton没有在任何地方声明。它在HTML id中给出，然后直接引用：mybutton.addEventListener（无需getElementById）。 - calipoop

2个回答

1

这适用于所有DOM元素，而不仅仅是按钮。这可能是一种不好的做法，因为任何人都可以将mybutton更改为其他内容（即mybutton = "BLABLA"），那么您的代码就会出错。

另请参见this。

- yoelp

感谢您提供的信息和链接 Yoelp - 非常有帮助。 - calipoop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RobG · Accepted Answer

因为在浏览器脚本的早期阶段，IE决定将元素名称和ID作为全局变量引用该元素。其他浏览器认为这是一个坏主意（确实如此），并未这样做。

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

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

所以你会看到：

<button id='mybutton' ...>

浏览器会创建一个全局变量mybutton，指向该元素。