案例3-1 借助JavaScript实现丰富的页面交互效果

在下面的程序中，读者可以初步体会到JavaScript脚本语言中事件处理机制的工作方式和工作过程，我们继续在项目“P31_JavaScriptTest”中新建HTML文件。

源程序名称：3-2.html

<html>

<head>

</head>

</body>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollDelay=110 ><a href="" target=_blank><font color=#ff0000>热点新闻:Ajax成为互联网技术中的新宠</font></a></marquee><br>;

</body>

</html>

该页面效果如图3-3所示。

图3-3 事件驱动机制

在该程序中实现了网页中常见的滚动新闻的效果，其中新闻字幕的滚动采用的是滚动字幕<marquee>组件，使用超级链接标记实现了新闻页面的跳转，同时在<marquee>标记中添加了两个针对事件的处理。其中“onmouseover”事件将在鼠标指针悬停在该滚动字幕对象上方时发生，在本例中一旦发生这个事件，滚动字幕对象调用该类对象的stop()方法，使得滚动字幕停止滚动。与之相对应，当鼠标指针离开滚动字幕上方时，即一旦发生“onmouseout”事件，此时将调用该对象的start()方法使得滚动字幕继续滚动。

通过上面这个简单的案例，相信读者对事件驱动的处理机制，包括其基本工作原理已经有所了解，下面结合JavaScript脚本语言介绍几个比较常见的事件。

onclick事件即鼠标单击事件，该事件可以让页面中设置的按钮真正发挥作用。例如下面的程序：

源程序名称：3-3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

function checkValid()

{

var tmp1,temp2,str1;

//获得text1的值

str1 = document.myform.email.value;

//获取第一个@的位置

tmp1 = str1.indexOf('@');

//获取最后一个@的位置

tmp2 = str1.lastIndexOf('@');

if(str1.length == 0)

//不合法，字符串为空串

window.alert("请输入内容后再提交");

else if(tmp1 < 0)

//不合法，字符串中不包含@字符

window.alert("字符串中不包含@");

else if(tmp1 == 0 || tmp1 == str1.length-1)

//不合法，@字符出现的位置不对

window.alert("@字符出现的位置不对");

else if(tmp1 != tmp2)

//不合法，@字符出现了不止一个

window.alert("@字符出现了不止一个");

else

//合法的E-mail地址

alert("E-mail地址合法有效");

}

</Script>

</head>

<body>

请输入您的E-mail地址：<br>

</form>

</body>

</html>

在该程序中当用户单击提交按钮时，将调用在脚本中定义的函数“checkValid()”。依据用户输入的不同内容，进行E-mail地址有效性的检查，如果用户输入的地址无效，将针对具体情况对用户进行提示，否则输出为一个合法有效的E-mail地址。本例中使用的document.myform. email.value是在浏览器环境中使用DOM（有关DOM将在本章后续的内容中进行介绍）完成对象的定位，并对其属性进行操作的用法，也可以简写成myform.email.value。

图3-4所示为用户输入的地址中包含了多个@符号之后的提示效果。

图3-4 E-mail地址的有效性检查

onchange事件即当对应元素的值发生改变时触发的事件。该事件经常用在针对列表框数据处理的场合中。下面给出一个实例，以让读者体会到该事件的应用场合。

源程序名称：3-4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

//当列表框中的被选中选项发生改变时调用的函数

function change()

{

//依据选择的不同选项，显示不同的作者信息

switch(myform.option1.value)

{

case "s1":

myform.txt1.value="张桂元";

break;

case "s2":

myform.txt1.value="贾燕枫";

break;

case "s3":

myform.txt1.value="张宇翔";

break;

}

</Script>

</head>

<body>

<p>书籍作者信息查询：

< option value="s1">Web 2.0开发入门与实践（Java）</ option >

< option value="s2">Web 2.0开发入门与实践（.NET）</ option >

< option value="s3">Ajax核心技术</ option >

</select>

</form>

</body>

</html>

在该程序实现的页面中包含了两个表单元素，一个为列表框，另一个为文本框。当用户在列表框中选择不同的选项，即不同书籍的名称时，在文本框中将显示该书作者的相应信息，页面效果如图3-5所示。

图3-5 书籍作者信息查询

在上面的程序中“myform.option1.value”可以获取对应列表框的值，而onchange事件将在列表框的值改变时发生。

onload事件及onunload事件分别在HTML页面载入和卸载时发生。因此一般有关页面的初始化工作往往放在onload事件发生时完成。示例如下：

源程序名称：3-5.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

function init()

{

alert("欢迎光临！");

}

function finiish()

{

alert("下次再来！");

}

</Script>

</HEAD>

</BODY>

</HTML>

该页面的效果为，在页面刚刚打开时，将弹出“欢迎光临！”窗口，当用户关闭该页面时，将弹出“下次再来！”窗口。

onfoucs事件及onblur事件分别在对应元素获得焦点或者失去焦点时发生。例如，当用户将插入点定位在某个文本框中时，该文本框即获得焦点。当插入点离开该文本框时，即失去焦点。示例如下：

源程序名称：3-6.html

<html>

function begin()

{

usrId.value="";

}

function end()

{

alert("请确认输入的信息，谢谢！");

}

</script>

<body >

</body>

</html>

该页面的效果为，首先显示文本框，并在其中显示相应的提示信息“请输入用户名”，一旦用户将插入点定位到文本框中，提示信息将自动消失。当用户结束输入，离开文本框时，将显示告别窗口。

结合JavaScript脚本可以使用的事件还有许多，本书就不再一一举例了，下表中给出了可以结合脚本使用的相关事件，读者可以在需要时进行查阅。

表3-1 JavaScript事件汇总

事件		触发时机
一般事件	onclick	鼠标单击时触发此事件
	ondblclick	鼠标双击时触发此事件
	onmousedown	按下鼠标时触发此事件
	onmouseup	鼠标按下后松开鼠标时触发此事件
	onmouseover	当鼠标指针移动到某对象范围的上方时触发此事件
	onmousemove	鼠标移动时触发此事件
	onmouseout	当鼠标指针离开某对象范围时触发此事件
	onkeypress	当键盘上的某个键被按下并且释放时触发此事件
	onkeydown	当键盘上某个按键被按下时触发此事件
	onkeyup	当键盘上某个按键被按放开时触发此事件
页面相关事件	onabort	图片在下载时被用户中断
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容完成时触发此事件
	onmove	浏览器的窗口被移动时触发此事件
	onresize	当浏览器的窗口大小被改变时触发此事件
	onscroll	浏览器的滚动条位置发生变化时触发此事件
	onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
	onunload	当前页面将被改变时触发此事件
表单相关事件	onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当表单中RESET的属性被激发时触发此事件
	onsubmit	一个表单被递交时触发此事件
滚动字幕事件	onbounce	在Marquee内的内容移动至Marquee显示范围之外时触发此事件
	onfinish	当Marquee元素完成需要显示的内容后触发此事件
	onstart	当Marquee元素开始显示内容时触发此事件
编辑事件	onbeforecopy	当页面当前被选择内容将要复制到浏览者系统的剪贴板前触发此事件
编辑事件	onbeforecut	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件

续表

事件		触发时机
编辑事件	onbeforeeditfocus	当前元素将要进入编辑状态
	onbeforepaste	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
	onbeforeupdate	当浏览者粘贴系统剪贴板中的内容时通知目标对象
	oncontextmenu	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
	oncopy	当页面当前的被选择内容被复制后触发此事件
	oncut	当页面当前的被选择内容被剪切时触发此事件
	ondrag	当某个对象被拖动时触发此事件 [活动事件]
	ondragdrop	一个外部对象被鼠标拖进当前窗口或者帧触发此事件
	ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
	ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
	ondragleave	当被鼠标拖动的对象离开其容器范围内时触发此事件
	ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
	ondragstart	当某对象将被拖动时触发此事件
	ondrop	在一个拖动过程中，释放鼠标键时触发此事件
	onlosecapture	当元素失去鼠标移动所形成的选择焦点时触发此事件
	onpaste	当内容被粘贴时触发此事件
	onselect	当文本内容被选择时触发此事件
	onselectstart	当文本内容选择将开始发生时触发的事件
外部事件	onafterprint	当文档被打印后触发此事件
	onbeforeprint	当文档即将打印时触发此事件
	onfilterchange	当某个对象的滤镜效果发生变化时触发的事件
	onhelp	当浏览者按下F1键或者浏览器的帮助选择时触发此事件
	onpropertychange	当对象的属性之一发生变化时触发此事件
	onreadystatechange	当对象的初始化属性值发生变化时触发此事件