4

In a very common code example on Javascript event delegation https://javascript.info/event-delegation, I'm confused about where the variable "menu" comes from on line 40 in http://plnkr.co/edit/91Q9jINXlue2fXiB0fAY?p=preview. The variable is passed to the constructor, yet is never initialized. It appears the variable "menu" automatically is created from this div element:

<div id="menu">...</div>
<script>
...
new Menu(menu); /* Who initializes "menu".
...
</script>

I've been doing Javascript for a long time yet this is really confusing to me. I also am not sure how to generalize this question.

Normally I would do a document.getElementById("menu") to get the div element. Where do these variables get initialized and how can I find out more about variables like these? Is there a spec?

Charlie Dalsass
  • 1,986
  • 18
  • 23

3 Answers3

3

I takes the value of the element with the same id.

<div id="menu">

As specified by the Web Hypertext Application Technology Working Group (WHATWG):

7.2.2.3 Named access on the Window object

window[name]

Returns the indicated element or collection of elements.

As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the web platform, for example. Instead of this, use document.getElementById() or document.querySelector().

user3840170
  • 26,597
  • 4
  • 30
  • 62
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • This answer was so similar, not sure which to accept. Sorry Nina, maybe I'll leave the first one for now. Can't remember who answered first. ;) – Charlie Dalsass Sep 03 '17 at 17:29
2

It comes from this line:

<div id="menu">...</div>

Browsers expose DOM elements as global variables with names corresponding to their id attributes. This is not very good practice though, it's recommended to avoid it as it's pretty error prone and confusing.

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • What is the name for this. I always assumed you had to do getElementById() – Charlie Dalsass Sep 03 '17 at 17:08
  • 1
    @CharlieDalsass You would better use proper methods to select your DOM elements like `getElementById`, `querySelector`, etc. The example in javascript.info is a bad pattern. – dfsq Sep 03 '17 at 17:10
  • I understand it's a bad pattern, which is probably why I've never seen it before. However, I'd like to understand what this mechanism is and learn more about it. – Charlie Dalsass Sep 03 '17 at 17:12
0

This variable is generated automatically by the browser and a member of the window element.

The HTML5 standard specifies that the window object must have a property key whose value is elem if...

  • there is exactly one DOM element elem whose property id has the value key.
  • there is exactly one DOM element elem whose property name has the value key. elem’s tag must be one of: a, applet, area, embed, form, frame, frameset, iframe, img, object.

The specification can be found here: https://html.spec.whatwg.org/#named-access-on-the-window-object

maja
  • 17,250
  • 17
  • 82
  • 125
  • Little deeper thanks. Is there a spec for that? Seems everyone in the world already knows about this behavior except me! On the other hand, I know how things go in real life. e.g. (One can never assume anything.) – Charlie Dalsass Sep 03 '17 at 17:16
  • I added a link. It's neat to know such things, especially when creating short examples or demos. But you usually shouldn't use it in practice – maja Sep 03 '17 at 17:23
  • Thanks guys. I'll mark this as accepted because it has a reference, which is what I was really looking for (once I had some context about what was going on). Now that I have some keywords for hooks, I'm also seeing a nice discussion at https://stackoverflow.com/q/3434278/1620112 with the same question, so this might be a dupe. – Charlie Dalsass Sep 03 '17 at 17:25