JavaScript action inside HTML5 oninput attribute?

问题:

I have been learning HTML5. One of the examples I have encountered uses an input element of type range and an output element (this example currently only works in Chrome, Safari and Opera). The following form produces a slider with the result echoed to the output element.

<form>
   <p>
      <input type="range" id="slideValue" value="50" 
          oninput="slideCurrent.value = parseInt (slideValue.value);" />
      <output id="slideCurrent">50</output>
   </p>
   <input type="submit" value="Send">
</form>

My question concerns the oninput attribute. The oninput attribute contains JavaScript. In pre-HTML5 JavaScript I commonly see JavaScript references to this.value. However in the above HTML5 example the references to slideCurrent and slideValue work (apparently without the need to use getElementById). I believe this is a new way for JavaScript to behave.

Is this new JavaScript method of action documented somewhere?

回答1:

Code within inline event handlers is scoped to the element, as if it was in a with block.
Therefore, you can use properties of the element as global variables.

This is a little-known and dangerous feature, and is not new to HTML5.

回答2:

It's a method introduced by IE, that elements' names and ids are references in the global scope. Other browsers have copied it, but it's considered as bad use. Mozilla throws a warning:

element referenced by ID/NAME in global scope. Use WC3 standard document.getElementById() instead...

You can find lots of threads when googling for that. A good article can be found here. In the event handler you can use this as a reference to the element, but the output element should be acessed by standard dom methods.

EDIT: Oh shit, yes, its in the spec: http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem. But with a big red alert:

It is possible that this will change. Browser vendors are considering limiting this behaviour to quirks mode. Read more...

See also Mozilla bugs 303420 and 602381