在 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>