事件概述
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调用的程序就会被执行。
效果说明:输入口令后,移开鼠标会触发“鼠标移开”事件。