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

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

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

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

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

1
2
3
function(){
alert(event.value);
}

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

1
2
3
4
5
6
7
function (){
with(document){
with(this){
alert(event.value);
}
}
}

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

1
2
3
4
5
<!-- 输出 "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标签是不行的),则函数中就会有访问表单元素的入口。上面的函数就会变成这样:

1
2
3
4
5
6
7
8
9
function (){
with(document){
with(this.form){
with(this){

}
}
}
}

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

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

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

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

优惠福利

江山父老能容我,不使人间造孽钱