事件处理程序

1. HTML事件处理程序

某个元素支持的每种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定。 这个特性的值是能够执行的JavaScript代码。

例如：

<input type="button" value="Click me" onclick="showMessage()" />

<script>
function showMessage(){
    alert('hahaha');
</script>

这样指定事件处理程序具有一些独到之处。a. 这样会创建一个封装着元素属性值的函数。 这个函数中有一个局部变量 event。

如：<input type="button" value="Click me" onclick="alert(event.type)" /> 在这个函数内部，this值等于事件目标元素。 这个动态创建函数的另外一个有趣的地方是她扩展作用域的方式。在这个函数内部可以像访问局部变量

一样访问document及该元素本身的成员。这个函数使用with像下面这样扩展作用域：

function(){

　　with(document){

　　　　　　with(this){
　　　　　　　　}
　　　　　　}
　　　　}

如果当前元素是一个表单输入元素，则作用域中还会包含表单元素的入口。这个函数就会变成：

 

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

　　　　　　　　}
　　　　　　}
　　　　}    

这样扩展作用域就可以让事件处理程序无需引用表单元素就能访问其他表单字段。例如：

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