创建时间:2021-07-09
更新时间:1 分钟前
在 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>