6

Given this code:

<button id="blah" onclick="alert(id)">Click me</button>

Clicking the button will alert "blah". Why does the id attribute become a variable visible within the scope of the onclick handler?

Another example:

<button style="font-size:200%" onclick="console.log(style)">Click me</button>

Here we see that style refers to a CSSStyleDeclaration object, rather than the string value of the attribute. This is similar to what we'd get by referencing an index of the button element's attributes property, or through attribute properties like this.style (getAttribute would return the string value instead).

Where is this behavior specified?

http://jsfiddle.net/b8mpJ/

Improve this question
1
  • Interesting question. I wonder right answer too :) Commented Dec 24, 2013 at 21:30

2 Answers 2

Reset to default
2

Because it's specified in Web Applications API. Quoting whatWG's Living Standard:

When the user agent is to get the current value of the event handler H, it must run these steps:

[...] Using the script execution environment obtained above, create a function object with:

[...] Lexical Environment Scope

  • Let Scope be the result of NewObjectEnvironment(document, the global environment).

  • If form owner is not null, let Scope be the result of NewObjectEnvironment(>form owner, Scope).

  • If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).

NewObjectEnvironment() is defined in ECMAScript edition 5 section 10.2.2.3. You may probably know its effect better from with statement (where it's used as well). In other words, the target element's properties are checked as well when looking for a particular name binding in the event handler's function.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I think you nailed it. Might be good to quote ES5 section 10.2.2.3 here for anyone else who comes across this; steps 2 and 3 are vital to understanding why this happens. Thanks.
Minor nit-pick, but given that whatWG reflects what browsers actually do, saying the behaviour is because of whatWG is probably backwards (for now): whatWG is just documenting what browsers do in an attempt to standardise behaviour. ;-)
@RobG, do you happen to know if this behavior has "always" existed? Somehow I've never noticed it before today.
@DaggNabbit Haven't found any reference for 'always', but this article describing the same problem is quite (2010) old. )
@DaggNabbit—it seems to have been there from the very beginning: stackoverflow.com/a/9160009/855543.
|
0

I'm not sure where it is specified, but what's happening is that your handler is being called with the this variable set to the element. That's why the attributes are visible, since id could be seen as a shorthand form of this.id.

Improve this answer

1 Comment

Variable resolution on the scope chain does not involve this.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.