HTMLのイベント属性(onclickなど)のスコープについて #JavaScript

後輩から、以下のコードが動かないのがわからないという相談を受けた。(一部改変)

<!DOCTYPE html>
<title>ugougo</title>
<form>
    <input type="button" value="送信" onclick="submit()">
</form>
<script>
    function submit() {
        alert(1);
    }
</script>

まさかと思ってやってみたが本当に動かない。submit()を呼ぶとthis.form.submit()が呼ばれて本当にsubmitされてしまう。謎だ。

半時間ほど調べてみたところ、以下の仕様が見つかった。

Lexical Environment Scope
1. Let Scope be the result of NewObjectEnvironment(document, the global environment).
2. If form owner is not null, let Scope be the result of NewObjectEnvironment(>form owner, Scope).
3. If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).
http://www.w3.org/TR/html5/webappapis.html#getting-the-current-value-of-the-event-handler

要するに、上のsubmit()は、機能的に以下のコードとほぼ等価である。

with (this.form) {
    with (this) {
        submit();
    }
}

つまり、onclickからidを参照するとthis.idが呼ばれ、submitを参照するとthis.form.submitが呼ばれるのだ。キモいことこの上ないが、仕様なのでしかたがない。~~もともと<script>にはtypeが指定できるのにイベント属性にはtypeが指定できないというエモい仕様だけど~~

参考: javascript - Why do an element's attributes appear in the scope of an inline function? - Stack Overflow