addEventListener（）沒有getElementById引用成功？

看看這個小提琴（以下部分的代碼片段）：http://jsfiddle.net/QJJb8/addEventListener（）沒有getElementById引用成功？

<button id='mybutton'>MY BUTTON</button> 

mybutton.addEventListener('click', mybuttonClick, false); 

function mybuttonClick(e){ 
    alert(e.target.textContent+' WAS CLICKED!'); 
}

注意如何我不使用的getElementById（）來獲取到按鈕的引用。爲什麼它仍然有效？（經過Firefox，Chrome和IE9的測試）

它是不是很好的做法/怪癖，還是它構建在按鈕元素的功能？如果是後者，那麼在使用按鈕元素時，這是一個非常棒的振作/快捷鍵！或者，也許我只是過度使用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

來源

2013-05-29 calipoop

它的工作原理因爲您從click事件監聽器（即「e」參數）獲取對按鈕本身的引用，然後使用該參數顯示按鈕的文本 –

@ FilipposKarapetis - 但不添加監聽器。 – RobG

@FilipposKarapetis - 實際上，我的具體問題是在它到達「e」事件監聽器之前 - 爲什麼函數首先工作？注意mybutton沒有在任何地方聲明。它在HTML id中給出，然後直接引用：mybutton.addEventListener（不帶getElementById）。 – calipoop

因爲回來的路上，在瀏覽器的腳本的開頭，IE決定製作引用元素的元素名稱和ID全局變量。其他人都認爲這是一個糟糕的主意（這是），並沒有這樣做。然而，IE佔據了瀏覽器市場的大約95％，開發者爲IE的怪癖而開發，所以其他瀏覽器實現了相同的行爲，但沒有做廣告（與支持document.all相同）。所以現在所有的瀏覽器都這樣做，但幾乎沒有人使用它。

除了當有人通過它絆倒......

所以，你必須：

<button id='mybutton' ...>

瀏覽器創建一個全局myButton的變量引用的元素。

來源

2013-05-29 22:31:47 RobG

有趣 - 所以這是不好的做法？看起來像這樣一個偉大的捷徑，這樣一個很長的document.getElementById（）選擇器。我想如果沒有它的規範，我可能最好不要使用它來面向未來......無賴嗎？ – calipoop

我確定那是原始開發者的想法。但是你真的希望*每個*元素ID和名稱是一個全局變量嗎？這大大增加了名稱衝突的範圍。而且，聲明的全局變量優先於元素ID和名稱，所以事情會變得非常混亂。 – RobG

是的，可能不是_every_元素ID ...但對於按鈕元素，你幾乎總是需要一個ref ... mighta得心應手！無論如何，我會堅持OG getElementById方法，直到我聽說有一個規範添加...再次感謝。 – calipoop

這適用於所有的DOM元素，不僅按鍵，它大概因爲任何一個不好的做法，可能會改變爲myButton別的東西（即mybutton = "BLABLA"），那麼你的代碼打破

也看到this

來源

2013-05-29 22:39:54 yoelp

感謝您的信息和鏈接yoelp - 非常有幫助 – calipoop

addEventListener（）沒有getElementById引用成功？

回答

相關問題