ansaurus

Question

Is x a reserved keyword in Javascript FF/Safari not in IE?

Answer 1

+6 A:

Your problem is with variable scope, not that "x" is reserved. An image object has a property named "x". You can see this with Chrome's developer tools. When you call "alert(x);" on the image object, the "x" in scope is the "x" property on the image.

David 2010-03-22 19:27:26

The `x` property seems to be the x-coordinate of the image; `y` is what you would expect, too.

Matchu 2010-03-22 19:28:24

Ah yes, beat me too it. This is what I was thinking too. But I haven't been able to find any official documentation of this behavior. Presumably the functionality is just left over from the "DOM 0" days?

Daniel Pryden 2010-03-22 19:30:40

@David: if I was an artist I would build a statue to you and to stackoverflow. I really, really appreciated your help, I was nearly beating my head on the desk today! Thanks!

Marco Demajo 2010-03-22 20:43:49

Answer 2

+1 A:

I can't seem to find any documentation to support this, but my guess is that the <img> tag is being treated specially, and the object is actually a JavaScript Image object, not a normal DOM element. The Image object has an x property, and so your unscoped reference to x means Image.x. If you want the global x property, just use window.x instead.

Daniel Pryden 2010-03-22 19:29:10

Answer 3

A:

Still supported by some browsers, before the dom spec, images, a elements and area elements all had read only x and y properties for their coordinates on the page.

kennebec 2010-03-22 20:40:17

Answer 4

+1 A:

Just to complete the answers from David and Daniel, this behavior is not documented at all, but it work like the following in almost every modern browser:

The content of an inline event handler becomes the FunctionBody of a function that the browser calls when it fires that event.

The scope chain of this function is augmeted with the element, the element's FORM (if it exits and is a FORM element), and document itself.

It looks something like this in code:

function onclick(event) {
  with(document) {
    with(this.form) {
      with(this) {
        // inline event handler content...
      }
    }
  }
}

This behavior can cause all sort of name conflicts due the augmentation of the scope chain you cannot be 100% sure about what you are referring, it could be an attribute of the element itself, an attribute of the element's form, an attribute of the document object or any global variable.

ansaurus

tags:

views:

answers:

Is x a reserved keyword in Javascript FF/Safari not in IE?

related questions