文档介绍：JavaScript中的浏览器对象
第九章
内容回顾
对象
this语句
with语句
new操作符
eval函数
字符串对象
Math对象
Date对象
2
本章目标
JavaScript 中的通用事件
浏览器对象- 属性和方法
3
事件对象概念
事件可以由用户生成,也可以由系统生成
每个事件都有与之相关联的Event对象
Event 对象提供下列信息:
事件类型
事件发生时光标的位置
Event 对象可以用作事件处理程序的一部分
4
事件的生命周期
事件的生命周期通常包含下列阶段:
与发生的事件相关联的用户操作或条件
立即更新 Event 对象以反映事件的状态
触发事件
调用相关联的事件处理程序
事件处理程序执行其操作并返回
5
JavaScript事件
onClick
onChange
onFocus
onBlur
onMouseOver
onMouseOut
onLoad
onSubmit
onMouseDown
onMouseUp
6
onClick事件示例
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY><FORM>请输入表达式:
<INPUT TYPE="text" NAME="expr" SIZE=15 ><BR>
<INPUT TYPE="button" VALUE="计算" ONCLICK="compute()"><BR>
结果:<INPUT TYPE="text" NAME="result" SIZE=15 ><BR>
</FORM>
</BODY></HTML>
7
onChange事件示例
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkNum(num){
if (num == ""){
alert("请输入一个数字值");
return false;
}
if (isNaN (num)){
alert("请输入一个数字值");
return false;
}
else alert ("谢谢!");
}
</SCRIPT>
</HEAD><BODY bgColor = white><FORM>
请输入一个数字:
<INPUT type = text size = 5 onChange="checkNum()">
</FORM></BODY></HTML>
8
onFocus/onBlur事件示例
<HTML>
<BODY BGCOLOR="lavender">
<FORM>
<INPUT type = text name = text1
onblur="(='aqua')"
onfocus="(='dimgray')">
</FORM>
</BODY>
</HTML>
9
onMouseOver/onMouseOut事件示例
<html><head>
<script language="javascript">
var num =0;
function showLink(num) {
if (num==1){
[0].elements[0].value= "您选择了Aptech";
}
if (num==2){
[0].elements[0].value = "您选择了Asset";
}
if (num==3){
[0].elements[0].value = "您选择了Arena";
}
}
</script>
</head><body><form><input type=text size=60></form>
<a href="#" onMouseOver="showLink(1)">Aptech</a><br>
<a href="#" onMouseOver="showLink(2)">Asset</a><br>
<a href="#" onMouseOver="showLink(3)">Arena</a><br>
</body></html>
10