事件概述
JavaScript是一门脚本语言，也是一门基于面向对象的编程语言，虽然没有专业面向对象编程语言那样规范的类的继承，封装等，但有面向对象的编程必须要有事件的驱动，才能执行程序。例如，当用户单击按钮或者提交表单数据时，就发送了一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。JavaScript语言中的事件的处理功能，可以给用户带来更多的操作性，也可以开发更具交互性，应用性的网页。
| 事件 | 说明 |
| onClick | 鼠标单击事件 |
| onChange | 文本框内容改变事件 |
| onSelect | 文本框内容被选中事件 |
| onFocus | 聚焦 |
| onLoad | 装载事件 |
| onUnload | 卸载事件 |
| onBlur | 失焦事件 |
| onMouseOver | 鼠标事件 |
| onMouseOut | 鼠标移开事件 |
1、鼠标单击事件onClick
onClick是一个鼠标单击事件，在当前网页上单击鼠标时，就会发生该事件。同时onClick事件调用的程序块就会执行。鼠标的单击事件（onClick）通常与按钮一起使用。
基本语法：
<input type="button" name="button" onclick="rec(this.form)" value="面积" />语法说明：在HTML文件中，onClick常常与表单中的按钮一起使用。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onClick事件</title>
</head>
<body>
<script type="text/javascript">
function rec(form) {
form.recanswers.value = (form.recshortth.value * form.recheightth.value + form.reclength.value * form.recheightth.value)/2
}
</script>
<form action="">
<h1>梯形面积</h1>
上底
<input type="text" name="recshortth"/><br />
下底
<input type="text" name="reclength" /><br />
高度
<input type="text" name="recheightth" /><br />
<input type="button" name="button" onclick="rec(this.form)" value="面积" /><br />
<input type="text" name="recanswers" /><br />
</form>
</body>
</html>效果显示：输入数据，点击“面积”按钮，可以计算出面积，在JavaScript中的事件语法均与之相似。
2、文本框内容改变onChange
onChange事件是通过改变文本框的内容来发生事件的，当输入文本框的内容发生改变时，onChange事件调用的程序块就会被执行。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onChange事件</title>
</head>
<body>
<form action="">
<input type="text" name="change" value="欢迎光临" onchange="alert('谢谢光临！')" />
</form>
</body>
</html>效果显示：当文本框中的文字改变时，就会触发onChange事件，弹出提示框
3、内容选中事件onSelect
onSelect事件是一个选中事件，当文本框或者文本域中的文字被选中时，onSelect事件调用的程序就会被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onSelect事件</title>
</head>
<body>
<form action="">
<input type="text" name="change" value="欢迎光临" onselect="alert('欢迎选择！')" />
</form>
</body>
</html>效果显示：
当选中文本框中的内容时，会触发onSelect事件，执行响应的事件。
4、聚焦事件onFocus
onfocus事件是一个聚焦事件，网页中的对象获得聚焦时，onFocus事件调用的程序就会被执行。
效果显示：
5、装载事件onLoad
onload事件是一个装载事件，当载入一个新的页面文件时，onload事件调用的程序就会被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="alert('页面文件装载中，请稍后....')">
</body>
</html>效果显示：
6、卸载事件onUnload
onUnload事件是一个卸载事件，当卸载页面文件时，onUnload事件调用的程序就会被执行。
7、失焦事件onBlur
onblur事件是一个与onFocus相对的事件。onblur事件是一个失焦事件，当光标移开当前对象时，onblur事件调用的程序就会执行。
效果显示：
8、鼠标事件onMouseOver
onMouseOver事件是一个鼠标事件，当鼠标移到一个对象上时，该对象就会引发鼠标的onMouseOver事件，并执行onMouseOver事件调用的程序。
9、鼠标移开事件onMouseOut
onMouseOut事件是一个鼠标事件，当鼠标移开当前对象时，onMouseOut调用的程序就会被执行。
效果说明：输入口令后，移开鼠标会触发“鼠标移开”事件。
