【Javascript】input要素のonclickに書いたスクリプトについて

Tweet

Category JavaScript 2011/12/03

問題

こういうのが動くのは、IEの不具合か何かですか？

<input type="button" id="A" onclick="getElementById('A').style.background='#cc0000'">

※ちゃんとボタンが赤くなる。document.getElementById ではなくて getElementById。

onclick属性にスクリプトを書くと何か変な気がするんだけど。

答え

不具合ではなくそういうものらしい。

onclickなどイベント属性に書いたスクリプトのスコープチェーンは、withを使って書くとこんな感じになる。

function onclick(event) {
  with(document) {
    with(this.form) {
      with(this) {
        //onclickのスクリプト
      }
    }
  }
}

その要素（this）にはgetElementByIdというプロパティはないが、次に探しにいくのがその要素が属するフォーム（this.form）、次にdocument、最後にグローバル（window）となる。

だからこれも動く。this.form.submit() と書かなくても動くが、不正な書き方ではない。

<input type="button" id="A" onclick="submit()">

※フォームのsubmitができる。