HTML事件处理程序中的扩展作用域

创建时间：2021-07-09

更新时间：20 小时前

在 HTML 事件处理程序中，可以直接使用event对象访问事件对象，我们不用手动定义它，也不用从函数的参数列表中读取。另一个有意思的地方是它扩展了函数中的作用域。

先看下面两个示例，展示了如何用event访问元素的value属性。

<!-- 输出 "Click Me" -->
<input type="button" value="Click Me" onclick="alert(event.value)" />

alert(event.value)这段代码之所以会执行，是因为浏览器把它包装成了一个函数:

function(){
    alert(event.value);
}

在这个函数中可以直接访问document对象，以及用this访问元素本身。感觉像是利用with关键词扩展了函数内部的作用域。

function (){
    with(document){
        with(this){
            alert(event.value);
         }
    }
}

所以下面的写法都是有效的：

<!-- 输出 "Click Me" -->
<input type="button" value="Click Me" onclick="alert(this.value)" />
<input type="button" value="Click Me" onclick="alert(value)" />
<!-- 假设id为demo的元素已存在 -->
<input
  type="button"
  value="Click Me"
  onclick='getElementById("demo").innerHTML = Date()'
/>

还有一种情况，如果元素是表单里的一个输入元素（div标签是不行的），则函数中就会有访问表单元素的入口。上面的函数就会变成这样：

function (){
    with(document){
        with(this.form){
            with(this){

            }
        }
    }
}

这也是下面的input标签能够提交表单的原因，submit()方法真正执行的是form对象的submit方法：

<form>
  <input type="button" value="Click Me" onclick="submit()" />
</form>

也可以利用表单中其他元素的name值，获取该元素：

<form method="post">
  <input type="text" name="username" value="" />
  <input type="button" value="Echo Username" onclick="alert(username.value)" />
</form>