SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

問題

こういうのが動くのは、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ができる。

関連するメモ

コメント