3

Check out this fiddle (partial code snippet below): http://jsfiddle.net/QJJb8/

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

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

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

Note how I'm not using getElementById() to get a reference to the button. Why does it still work? (Tested in Firefox, Chrome and IE9 & 10.)

Is it bad-practice/quirk, or is it built in functionality for button elements? If the latter, that's an awesome perk/shortcut when using button elements! Or perhaps I've just been over-using getElementById() all this time?

//ANSWER UPDATE//////////////////////////////////////////////////////////////////////

After some research it seems the behavior discussed above is in fact part of the HTML5 spec. In addition to RobG's answer below, see also the following links for more insight:

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

https://stackoverflow.com/a/3434388/2434324 (link supplied by yoelp)

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

Community
  • 1
  • 1
calipoop
  • 792
  • 9
  • 31
  • It works because you're getting a reference to the button itself from the click event listener (i.e. the "e" parameter), which you're then using to display the button's text – Filippos Karapetis May 29 '13 at 22:29
  • @FilipposKarapetis—but not to add the listener. – RobG May 29 '13 at 22:33
  • @FilipposKarapetis - actually, my specific question is before it even reaches the "e" event listener - why does the function work in the first place? Note mybutton is not declared anywhere. It's given in the HTML id, then referenced directly: mybutton.addEventListener (without getElementById). – calipoop May 29 '13 at 22:33

2 Answers2

2

Because way back at the begining of browser scripting, IE decided to make element names and IDs global variables that referenced the element. Everyone else thought that was a bad idea (it was) and didn't do it.

However, IE grabbed about 95% of the browser market and developers developed for IE's quirks, so other browsers implemented the same behaviour but didn't advertise it (same with support for document.all). So now all browsers do it, but (almost) no one uses it.

Except when someone stumbles across it…

So where you have:

<button id='mybutton' ...>

browsers create a global mybutton variable that references the element.

RobG
  • 142,382
  • 31
  • 172
  • 209
  • interesting - so it IS bad practice? Seems like such a great shortcut for such a long document.getElementById() selector. I guess if there's no specification for it, I'm probably better off not using it for future-proofing... bummer? – calipoop May 29 '13 at 22:39
  • I'm sure that was what the original developers thought. But do you really want *every* element ID and name to be a global variable? That hugely increases the scope for name collisions. Also, declared global variables take precedence over element IDs and names, so things can get really confusing. – RobG May 29 '13 at 22:51
  • Yeah, probably not _every_ element ID... but for button elements, where you will almost always need a ref... mighta been handy! Anyways, I'll stick to the OG getElementById method till I hear of a spec addition... Thanks again. – calipoop May 29 '13 at 22:57
  • The funny part is the cone of silence that has descended overs such features. They are considered fundamentally bad but no browser developer is game to remove them for fear of breaking code written 15 years ago. The idea seems to be that if they are ignored, they'll just go away… – RobG May 29 '13 at 23:56
1

This works on all DOM elements, not only buttons, Its probably a bad practice since any one may change mybutton to something else (ie.mybutton = "BLABLA") then your code breaks

also see this

Community
  • 1
  • 1
yoelp
  • 1,611
  • 2
  • 9
  • 17