教学材料HTML DHTML教程-第九章

上传人：1*** IP属地：广东上传时间：2026-03-24 格式：PPT 页数：151 大小：4.29MB 积分：15 举报 版权申诉

已阅读5页，还剩146页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第9章事件处理和浏览器对象

在客户端脚本中，JavaScript通过对事件进行响应获得与浏览者的交互。例如，当用户单击一个按钮时，就触发了一个单击事件，通过对这些事件的响应，可以完成特定的功能。而浏览器对象是指支持JavaScript的浏览器在装入Web页面时创建出的多个JavaScript对象，浏览者可以通过这些对象访问Web页面中的各种元素，获得相应的操作效果。本章将介绍事件处理和浏览器对象，具体内容如下:什么是事件;JavaScript事件和HTML事件;如何进行事件处理;主要的浏览器对象，如window对象、document对象、event对象、frame对象、history对象、location对象、navigator对象、screen对象、form对象、image对象和link对象等。返回9.1JavaScript事件处理

9.1.1什么是事件

所谓事件就是指用户与Web页面交4_时产生的操作，如单击鼠标、移动鼠标、按下键盘按键等。当用户进行单击鼠标等操作时，就产生了一个事件，这个事件需要浏览器进行处理。浏览器响应事件并进行事件处理的过程称为事件处理，进行这种处理的代码称为事件响应函数。通常浏览器会默认定义一些通用的事件处理过程，以便响应那些基本的事件。例如，单击超链接的默认响应就是装入并显示目标页面。但是，要实现动态的、具有交互功能的页面，却需要自定义事件处理函数，从而让Web页完成指定的功能。例如，在提交表单内容之前，先进行特定的验证处理，这样可以减轻网络和服务器的负担。下一页返回9.1JavaScript事件处理

9.1.2JavaScript事件表9.1列出了浏览器IE不IINetscapeNavigator共有的JavaScript事件。9.1.3HTML事件在实际进行事件处理时，需要将具体的事件与事件处理函数相关联，关联的方法就是为HTML元素指定事件处理属性(或者说事件响应属性)。例如，在第7章开始的例子中，通过为input标记符指定onClick属性，则确定了事件与事件处理函数的关联，如下所示:<inputtype=“button”onClick=“showdateU;”value=‘，显示时间”>onClick表示要处理的事件是click事件，等号后面的内容，或者说是onClick这个事件处理属性的值，是事件处理函数的名称。具体的事件处理函数，则用前面章节介绍的方法包含在script标记符中。上一页下一页返回9.1JavaScript事件处理

一般情况下，对应于某事件的事件处理属性通常是在该事件名称之前加on。通常在HTML中属性是与大小写无关的，即onMouseOver,onMouseover与ONMOUSEOVER都是一样可以使用的。对应于定义的JavaScript事件，表9.2列出了HTML元素的事件处理属性。上一页下一页返回9.1JavaScript事件处理

9.1.4事件处理

常用的事件处理方式有两种:使用语句进行事件处理和使用函数进行事件处理。如果事件处理函数的逻辑比较简单，就可以直接将JavaScript语句作为事件处理属性的值。但是为了使事件处理代码更加模块化和便于使用，最好还是使用事件处理函数的方式。下面是一个使用函数进行事件处理的例子，其源代码如下所示:<html><head><title>使用函数进行事件处理实例</title><scriptlanguage="JavaScript"type="text/javascript"><！--上一页下一页返回9.1JavaScript事件处理

functionIinklOver}//设置鼠标移到link1上时的效果。

{linkl.style.fontSize=36;linkl.style.color="red";linkl.style.fontStyle="italic";}//这里用到了对象style属烂，有关的详细信息请参见本书第10章的内容。functionIinklOutU//设置鼠标移出link1上时的效果

{linkl.style.fontSize=16;link1.style.color="blue";link1.style.fontStyle="normal";}上一页下一页返回9.1JavaScript事件处理

functionlink2Over()//设置鼠标移到link2上时的效果。

{link2.style.fontSize=36;link2.style.color="red";linlz2.style.fontStyle="italic";}functionIink20ut()//设置鼠标移出link2上时的效果。

{link2.style.fontSize=16;link2.style.color="blue";link2.style.fontStyle="normal";}上一页下一页返回9.1JavaScript事件处理

functionlink3Over()//设置鼠标移到link3上时的效果。

{link3.style.fontSize=36;link3.style.color="red";link3.style.fontStyle="italic";}functionlink30ut()//设置鼠标移出link3上时的效果。{link3.style.fontSize=16;link3.style.color="blue";link3.style.fontStyle="normal";}上一页下一页返回9.1JavaScript事件处理

//--></script></head><body><h3align="center">开怀一笑</h3><ahref--"humorOl.htm"name=linklonMouseOver="IinklOverU"onMouseOut="linklOutQ">洗澡</a><br><ahref="humor02.htm"name=link2onMouseOver="Iink20verU"onMouseOut="Iink20utQ">没丢零件</a><br><ahref="humor03.htm"name=link3onMouseOver="Iinl}iOverU"onMouseOut="IinK30utU">男孩和雪糕</A><br></body></html>上一页下一页返回9.1JavaScript事件处理

在浏览器中打开该文件，效果如图9.1所示，当鼠标指针移到任意超链接上时，字体将变大变红，并显示为斜体;当鼠标指针移出超链接时，字体将变小变蓝，并恢复为正常显示。上一页返回9.2浏览器对象

9.2.1什么是浏览器对象浏览器对象是指支持JavaScript的浏览器在装入Web页面时创建出的多个JavaScript对象，浏览者可以通过这些对象访问Web页面中的各种元素，获得相应的操作效果。1.文档对象模型文档对象模型(DocumentObjectModel，简称DOM是用于表示HTML元素以及Web浏览器信息的一个模型，它使脚本能够访问Web页上的信息，并可以访问诸如网页位置等特殊信息。通过操纵文档对象模型中对象的属性并调用其方法，可以使脚本按照一定的方式显示Web页并与用户的动作进行交互。下一页返回9.2浏览器对象

对于不同的脚本语言，通常都具有一个DOM的子集，以便在特定的脚本语言中实现对象模型。例如，JavaScript在其语言中就有一个对象模型。对于InternetExplorer,Microsoft公司专门为其创建了一个对象模型。使用为浏览器创建对象模型的方式使得对象模型与语言无关，从而可以获得更强的可扩展性。

JavaScript对象模型和IE对象模型非常相像，它们包含相似的对象和事件，反映了如图9.2所示的对象层次结构。在该层次结构中，最高层的对象是窗口对象(window，它代表当前的浏览器窗口;之下是文档(document)对象、事件(event)对象、框架(frame)对象、历史(history)对象、地址(location)对象、浏览器(navigator)对象不II屏幕(screen)对象;在文档对象之下包括表单(form)对象、图像(image)对象和链接(link对象等多种对象;在浏览器对象之下包括MIME类型(mimeType)对象和插件(plugin)对象;在表单对象之下还包括按钮(button)对象、复选框(checkbox)对象、文件选择框(fleOpload)对象等多种对象。上一页下一页返回9.2浏览器对象

2.对象引用方法在JavaScript中引用对象的方式与典型的面向对象方法相同，都是根据对象的包含关系，使用成员引用操作符(.)一层一层地引用对象。例如，如果要引用document对象，应使用window.document;如果要引用location对象，应使用window.location。由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window.，也就是说，可以直接用document引用document对象，用location引用location对象。当引用较低层次的对象时，一般有两种方式----使用对象索引或使用对象名称(或ID).例如，如果要引用文档中的第一个表单对象，则可以用document.forms[0]来引用;如果该表单的name属性为form1(或者ID属性为forml，则可以用document.forms["form1"]或直接document.forml来引用该表单。同样，如果在名称为form1的表单中包括一个名称为myText的文本框，则可以用document.form1.myText来引用该文本框对象。上一页下一页返回9.2浏览器对象

对应于不同的对象，通常还有一些特殊的引用方法。例如，如果要引用表单对象中包含的对象，可以使用elements数组;如果要引用文档对象中包含的某个标记符对象(例如p对象)，可以使用document对象的all属性，等等。对于这些特殊的引用方法，我们将在遇到时具体说明。3.浏览器对象表9.3中列出了所有的浏览器对象及相关说明。上一页下一页返回9.2浏览器对象

9.2.2window对象

window对象是文档对象模型中的顶级对象，它表小当前浏览器窗口，是所有其他对象的父对象。1.window对象的属性表9.4列出了window对象的各种属性和相应的说明。

在window对象的属性当中，l涂了document,frames,historyIIIlocation等代表窗口中对象的属性以外，其他的属性又可以分为两类。一类是表小窗口状态信息的属性，如:closed,defaultStatus,length,name和status;另一类是作为窗口代名词的属性，如:opener,self,parent和top。下面是一个使用window对象属性的例子，其源代码如下所示:上一页下一页返回9.2浏览器对象

<html><head><title>Window属性实例</title></head><bodyonmousemove="window.status=’欢迎来到我I均主页川><formname="forml">

单击以下按钮设置窗口状态:<p>

<inputtype="button"value="按钮”onClick="=，我的窗口'"></form>上一页下一页返回9.2浏览器对象

<scriptlanguage="JavaScript"type="text/,javascript"></scripb</body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，只要移动鼠标，状态栏中将显示”欢迎来到我的主页”;单击“按钮”则将窗口的名称被设置为“我的窗口”;再单击浏览器的“刷新”按钮，可以显示当前窗口的状态，如图9.3所示。2.window对象的方法window对象提供了很多方法来实现与窗口有关的各种常用功能。表9.5列出了window对象的各种方法以及相应的说明。3.window对象的方法实例一下面是一个包含open()方法和close()方法的例子，其源代码如下所示:<html><head><title>window_open&close实例</title>上一页下一页返回9.2浏览器对象

<scriptlanguage="JavaScript"type="text/javascript"><!--functionopenWin(){varnewWin=open("","","menubar=l,height=150,width=300");newWin.document.write("<form>")//省略了其他基本HTML标记。newWin.document.write(“单击以下按钮关闭窗口<p>”}newWin.document.write("<inputtype='button'value=，关闭’onclick=window.close()>")newWin.document.write("</form>")上一页下一页返回9.2浏览器对象

}//--></scripb</head><body><divalign="center"><h2>不同的按扭对应不同的新窗口...</h2><！--新窗口：打开一个默认的窗口，指定其中显示的文档--><inputtype="button"value="按钮1"onClick=window.open('win.htm','myWin')>上一页下一页返回9.2浏览器对象

<inputtype="button"value="按钮2'.onClick=window.open(",'new2','height=200,width=300')><！--打开一个空白窗口，并在其中写入文档内容--><inputtype="button"value="按钮3"onClick=openWin()></form></div></body></html>上一页下一页返回9.2浏览器对象

其中文件win.htm也在当前目录下，它的源代码如下:<html><head><title>window_open&close辅助文件</title></head><body><h2>这是第个新窗口!</h2><palign="center"><form>

<inputtype="button"value=”关闭”onclick=window.closeU></form></p></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，分别单击“按钮1"“按钮2”和“按钮3"，则会弹出三个大小不同、内容不同、包含的工具栏也不同的窗口，如图9.4所示。需要说明的是，在open方法中parameters参数是一个字符串，用于指定窗口的显示效果。用于指定窗口显示效果的通用选项包括:height(高度)和width(宽度):使用这两个选项可以指定新窗口的高度和宽度。这两个选项的单位是像素。location(地址):使用该选项可以指定新窗口中地址栏是否显小。该选项只有两个值:Yes(1)或者No(O).menubar(菜单栏):使用该选项可以指定新窗口中菜单栏是否显小。该选项只有两个值:Yes(1)或者No(0).上一页下一页返回9.2浏览器对象

resizable(调整尺寸):使用该选项可以指足新窗口的尺寸是台可以调整。该选项只有两个值:Yes(1)或者No(0).status(状态):使用该选项可以指定新窗口中状态栏是否显示。该选项只有两个值:Yes(1)或者No(0).toolbar(工具栏):使用该选项可以指定新窗口中工具栏是否显示。该选项只有两个值:Yes(1)或者No(0).4.window对象的方法实例二

window对象中的alert()方法的功能是将参数提供的字符串显示在一个提示对话框中，该对话框中包含一个“确定”按钮，单击该按钮可以关闭对话框。上一页下一页返回9.2浏览器对象

window对象中的confirm()方法，pJ以创建出一个包含“确定”按钮和“取消”按钮的对话框，用来确认用户所做的选择。如果用户选择了“确定”按钮，那么confirm()方法返回true;如果用户选择了“取消”按钮，那么confirm()方法返回false。作为confirm()方法参数的字符串，将与使用alert()方法时一样出现在对话框中。除了上述两种要求用户直接单击按钮做出选择的对话框外，在JavaScript中还可以创建要求用户进行键盘输入的对话框，实现这种对话框的方法是使用window对象的prompt()方法。

prompt()方法包含两个字符串参数，第一个参数表示要在对话框中显示的信息，第二个参数表示文本框中的默认文本。在显示的对话框中包含“确定”和“取消”按钮，如果用户在该对话框中单击“确定”按钮，那么该方法的返回值为用户在文本框中输入的内容或初始值(如果用户没有输入);如果用户单击“取消”按钮，那么prompt()方法返回null。

下面是一个使用alert()方法、confirm()方法和prompt()方法的实例，其源代码如下所示:<html><head><title>window_alert()方法、confirm()方法和prompt法实例</title></head><scriptlanguage="JavaScript"type="text/javascript">functionconfirmClose(){if(conffrm("您正在关闭当前窗口,真的要如此吗?”))window.close()}上一页下一页返回9.2浏览器对象

functionpromptqqU{while(prompt('请输入密码:","password")!="office")alert("密码错误，请重新输入!")}</scripb<body><divalign="center"><P>单击以下按钮弹出提示对话框</p><formname="form1"><inputtype="button"value="alert方法”onClick=window.alert("使用alert方法创建”)>上一页下一页返回9.2浏览器对象

</form><P>单击以下关闭窗口</p><form><inputtype="button"value='，关闭”onClick=confirmCloseU></form><P>单击以下按钮提示输入密码</p><form><inputtype="button"value="输入密码”onClick=promptqq()></form></div></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，单击“alert方法”按钮，将弹出一个“使用alert方法创建”对话框;当单击“关闭”按钮时，弹出一个确认对话框，如果用户单击“确定”按钮，则会关闭窗口;如果用户单击“取消”按钮，则什么都不做;单击“输入密码”按钮后会弹出一个要求用户输入的对话框，输入密码之后再单击“确定”按钮，如果输入正确(即输入“office")就返回窗口，否则弹出一个提示对话框要求继续输入，如图9.5所示。需要注意的是，用这种方式实现密码确认只具有最低级别的安全性，因为客户端脚本的所有内容都将随着网页一起下载到浏览器端。如果要实现具有进一步安全性的密码确认，应使用服务器端脚本。上一页下一页返回9.2浏览器对象

5.window对象的方法实例三在window对象的方法中包含四种用于进行定时设置的方法，其中setlnterval()和clearlnterval()方法用于设置和取消循环定时操作，setTimeout()和clearTimeout()方法用于设置和取消延时定时操作。设置setlnterval()方法的语法如下所示:setlnterval(expression,milliseconds)setlnterval(function，milliseconds，argl，arg2，…，argn)

其中milliseconds表示循环操作的定时时间{司隔(以毫秒为单位)，expression表示定时执行的表达式，function表示定时执行的函数，如果函数有参数，那么用arg1,...argn来表示。该方法的含义是，每隔多少毫秒，执行expression或function一次。由于它具有循环定时执行的表达式，因此经常用于动态内容的显示。上一页下一页返回9.2浏览器对象

设置了定时重复操作之后，还可以用clearlnterval()方法取消，该方法的语法为:clearlnterval(interval)其中interval参数表示setlnterval()方法返回的值。setTimeout()方法与setlnterval()方法类似，都是在指定的时间{司隔执行一个表达式或函数，不同的是setTimeout()方法只在延时到来时执行一次，而setlnterval()方法按指定时间间隔循环执行。设置setTimeout()方法的语法如下所示:setTimeout(expression,milliseconds)setTimeout(function，milliseconds，argl，arg2，…，argn)上一页下一页返回9.2浏览器对象

milliseconds表示循环操作的定时时间{司隔(以毫秒为单位)，expression表示延时到来时执行的表达式，function表示延时到来时执行的函数，如果函数有参数，那么用arg1,...argn来表示。该方法的含义是，调用方法milliseconds毫秒，执行expression或function一次。同样，也可以在指定时间到来之前用clearTimeout()方法取消设置的定时操作，该方法的语法为:clearTimeout(timeout)其中，timeout参数表小setTimeout()方法返回的值。下面是一个使用setlnterval()不IIclearlnterval()方法进行定时操作的例子(setTimeout()和clearTimeout()方法的用法类似，不再示例)，其源代码如下所示：上一页下一页返回9.2浏览器对象

<html><head><title>window_setlnterval()和clearlnterval()方法实例</title><scriptlanguage="JavaScript"type="text/,javascript"><!--varmyTimer="";functionstartTimer)//此函数调用seInterval()方法，每隔一秒钟调用一次acquireTime()函数。{myTimer=window.setlnterval("acquireTime()",1000);}上一页下一页返回9.2浏览器对象

functionstopTimer){window.clearlnterval(myTimer);}functionacquireTime){today=newDate();//捞攻当府灯娜with(today){document.forml.timer.value=getHours()+”点”+getDRinutes()+'，分”+get8econdsU+'，秒”;}//将得到的有关时间的字符串显示在名为“timer”的文本框中。上一页下一页返回9.2浏览器对象

}//--></scripb</head><bodyonLoad="startTimer)"><divalign="center"><fnrmname="form1”><table><tr><td><fontsize="4">现在的时间为:</font></td><td><inputname="timer"></td>上一页下一页返回9.2浏览器对象

</tr><tr><td><inputtype="button"value="停止计时器”onClick=stopTimerU></td><td><inputtype="button"value="重新启动计时器”onClick=startTimerU></td></tr></table></form></div></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，效果如图9.6所示;如果用户单击“停止计时器”按钮，那么时间显示停留在单击按钮的时间点;如果用户单击“重新启动计时器”按钮，那么将继续动态更新文本框中的内容。上一页下一页返回9.2浏览器对象

9.2.3document对象document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中所有其他的刘象。document对象是实现各种文档功能的最基本对象。1.document对象的属性表9.6列出了document对象的各种属性及相应的说明。下面是一个使用document属性的例子，其源代码如下所示<html><head><title>document属性实例</title></head><body>上一页下一页返回9.2浏览器对象

<p><imgsrc="handshake.jpg"width="113"height="62"><br>合作意向:</P><form><inputtype="textarea"</form>cols="50"rows="6"name="合作”><p><ahref--"#">&It;返回首页></a></p><scriptlanguage=JavaScripttype="text/javascript"><!--document.write("<h3>本文档I均统计信息如卜:</h3>")document.write(“本文档I均标题为:"+document.title+"<br>")document.write(“本文档的最后修改时间为:"+document.lastModified+"<br>")上一页下一页返回9.2浏览器对象

document.write(“本文档中包含<b>"+document.links.length+"</b>个超链接<br>”)document.write(”本文档中包含<b>"+document.forms.length+"</b>个表单<br>")document.write(“本文档中包含<b>”+document.images.length+“</b>个图像<br>")document.write("本文档中包含<b>"+document.applets.length+"</b>个Java小应用程序<br>")//--></scripb</body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，效果如图9.7所示.2.document对象的事件document对象可以应用于整个网页对象，它接收发生在网页上的各种事件。一般情况下，document对象可以处理3个基本的键盘事件keydown,keypress,keyup以及4个基本的鼠标事件click,dblclick,mousedown,mouseup。此外，document对象最常用的事件是onloadIIIonunload事件，分别在文档装载完毕和卸载时发生。下面是一个使用document鼠标事件的例子，它显小了处理鼠标事件的基本机制，其源代码如下所示:<html><head><title>document事件实例</title><scriptlanguage="JavaScript"type="text/,javascript">上一页下一页返回9.2浏览器对象

<--functionmouseDownHandler(){document.myForm.start.value=event.x+"}"+event.y;//有关event对象的说明请参见9.2.4节。}functionmouseUpHandler(){document.myForm.end.value=event.x+","+event.y;}//-->上一页下一页返回9.2浏览器对象

</script></head><bodyonmousedown="mouseDownHandler)"onmouseup="mouseUpHandler()">

<br><formname="myForm">鼠标起点:<inputname=startvalue=""><p>鼠标终点:<inputname=endvalue=""></fnrm></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，按住鼠标左键(或者右键)，拖动到页面的另一个位置后释放鼠标，这时文本框中将显示鼠标拖曳的起点和终点，如图9.8所示。以下示例则显小了onload和onunload事件的作用:<html><head><title>document事件实例onload和onunload</title></head><bodyonload="alert('欢迎来到NBA世界!’)”onunload="alert('谢谢光临!’)”><h3align="center">document事件实例之onload和onunload事件示例</h3></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，当进入页面时，显示“欢迎来到NBA世界!”对话框;退出该网页时(例如单击工具栏中的“前进”按钮跳转到另外一个页面)，显示“谢谢光临”!对话框，如图9.9所示。3.document对象的方法document对象常用的方法就一个，即我们前面已经反复使用的write()，它的用法为：document.write(value1,value2...)表示将用逗号分隔的参数作为字符串添加到文档中。如果参数不是字符串，则在被添加到文档之前转换为字符串。上一页下一页返回9.2浏览器对象

9.2.4event对象

event对象是一种特殊的对象，它通过各种属性提供了特定的事件处理机制。对于浏览器InternetExplorer不IINetscapeNavigatorevent对象的属性大不相同，并A传递事件的机制也各不相同。IE采用eventbubbling(事件浮生)的方式，而Navigator采用eventcapturing(事件捕获)的方式，本书只以IE为例。1.event对象的属性在InternetExplore:中，event对象的属性如表9.7所示。下面是一个使用event对象属性的例子，其源代码如下所示<html><head>上一页下一页返回9.2浏览器对象

<title>event属性实例</title></head><body><divalign="center"><form><h2>单击”显示帮助”按钮则可以显示帮助窗口...</h2><br><inputtype="button"value=”Rnv示帮助”onClick=”window.open('HelpWindow.htm')"></form></div></body></html>上一页下一页返回9.2浏览器对象

其中文件HelpWindow.htm也位于当前目录下，其源文件如下所示：<html><head><title>Window帮助文件</title><scriptlanguage="JavaScript"type="text/javascript"><!--functionkeyPress(){if(window.event.keyCode==27)//Esc键的Unicode代码是27。{window.close);}上一页下一页返回9.2浏览器对象

}//--></script></head><bodyonKeyPress="keyPress()"><divalign="center"><h2>这里是帮助窗口....</h2><br><h3>对不起，帮助信息尚末完成!</h3><br>按Esc键可以关闭此窗口！</div></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，单击“显示帮助”按钮时将显示一个帮助窗口，此时如果按Esc键，则会关闭该窗口，效果如图9.10所示。2.事件浮升

InternetExplorer处理事件时采用的机制称为eventbubbling(事件浮生)，其含义为:当事件发生时，它首先定向到发生事件的最底层对象，然后依次上浮，由各级对象定义的事件处理函数依次处理;如果某一级对象没有定义处理函数，则事件直接上浮。下面的例子显示了事件浮升机制的作用，当用户单击文档中的按钮时，click事件依次由input对象、form对象和body对象中的事件处理函数进行处理。该例子的源代码如下所示:<html><head><title>event事件浮升实例</title>上一页下一页返回9.2浏览器对象

<scriptlanguage="JavaScript"type="text/,javascript"><！--functionbuttonHandler(){alert("Click事件山buttonHandlerU函数处理！")}functionformHandler(){alert("Click事件山formHandler()函数处理！")}functiondocumentHandler(){alert("Click事件由documentHandler()函数处理！“)}//--></script></head><bodyonclick="documentHandler)">上一页下一页返回9.2浏览器对象

<formonclick="formHandler()"><inputtype="button"onclick="buttonHandlerU"value="请单击此处!”></form></body></html>

在浏览器中打开该文件，当用户单击“清单击此处”按钮时，首先显小“Click事件由buttonHandler()函数处理!”提小框;再单击“确定”按钮后，事件浮升到form对象，由formHandler()函数进行处理;再单击“确定”按钮后，事件进一步浮升，由documentHandler()处理(如果用户在按钮以外的区域单击鼠标左键，则会直接显小最后一个提小框)，如图9.11所示。上一页下一页返回9.2浏览器对象

9.2.5frame对象

frame(框架)对象用于表示框架文件中的框架，它是在遇到frame标记符时由浏览器创建。在框架文件中，frameset标记符代替了body标记符，frameset标记符中还包含一个或者多个frame标记符，代表每一个具体的框架。如果要访问窗口中的框架，可以使用以下方法之一:window.frames['framename']window.frames[index]window_framename1.frame对象的属性、方法和事件在IE和Navigator中，frame对象都被实现为window对象，因此每一个上一页下一页返回9.2浏览器对象

frame对象都是一个窗口对象，支持与window对象类似的属性、方法和事件。表9.8列出了frame对象常用的属性、方法和事件。2.frame对象实例下面是一个使用frame对象的例子，其源代码如下所示<html><head><title>frame对象实例</title><scriptlanguage="JavaScript"type="text/,javascript"><!--functionframeSumU{newWin=open("","","height=200,width=300");for(i=0;i<window.frames.length;i++)上一页下一页返回9.2浏览器对象

newWin.document.write('，框架#"+i+"名称是”+window.frame[i].name+"<p>");--></script></head><framesetcols="25%,*”onload="frameSum()"><framename="frame1”src="leftframe.htm"onResize=frames[OJ.document.bgColor='green'><framename="frame2"src="rightframe.htm"onResize=window.alert("你改变了框架的大小！”)></frameset></html>上一页下一页返回9.2浏览器对象

其中文件leftframe.htm和文件rightframe.htm都在当前日录下，它们的源文件分别如下所示<html><head><title>leftframe实例</title></head><body><h2>左框架<</h2></body></html>上一页下一页返回9.2浏览器对象

<html><head><title>rightframe实例</title></head><body><h2>右框架<</h2></body></html>

在浏览器中打开该文件，当浏览器加载页面时弹出一个新窗口，其中显示了框架名称信息;如果更改窗口大小或拖动框架边框，则同时触发两个框架的onResize事件，左边框架将变为绿色背景，同时弹出“你改变了框架的大小!”对话框，如图9.12所示。上一页下一页返回9.2浏览器对象

9.2.6history对象

history对象是一个特殊的链接对象，它代表浏览器的历史列表，使用户可以跟踪窗口中曾经访问过的URL。1.history对象的属性history对象的属性如表9.9所示。2.history对象实例下面是一个使用history对象的例子，其源代码如下所示:<html><head><title>History对象实例</title></head><body><divalign="center"><H1>History对象实例</H1><formname="form1">上一页下一页返回9.2浏览器对象

<inputtype="button"value=”<上一页"onClick="window.history.back()"><inputtype="button"value="下一页">onClick="window.history.forward()"><P><inputtype="button"value=”<<跳转到>>"onClick="window.history.go(document.forml.num.value)"><inputname="num"size="2"></form><scriptlanguage="JavaScript"type="text/,javascript">上一页下一页返回9.2浏览器对象

</script></body></html>在浏览器中打开该文件，效果如图9.13所示。如果单击“上一页”按钮，则可以后退一页;单击“下一页”按钮，则可以前进一页;在“跳转到”按钮后的文本框中输入整数，然后单击该按钮，可以跳转到指定的页面。上一页下一页返回9.2浏览器对象

9.2.7location对象

location对象也是一种特殊的链接对象，它代表当前窗口中所装入文件的URL，通常用于重新装入新的文件。1.location对象的属性和方法location对象的属性和方法如表9.10所示。2.location对象实例下面是一个使用location对象的例子，其源代码如下所示<html><head><title>Location对象实例</title><scriptlanguage="JavaScript"type="text/javascript">上一页下一页返回9.2浏览器对象

<functionjump1(){window.location=document.forml.URL一extbox.value;//使用location,window.location和location.href的效果都一样。}functionjump2(){window.location.replace(document.forml.URL_Textbox.value);}--></script></head><body>上一页下一页返回9.2浏览器对象

<divalign="center"><h1>请输入一个Internet地址......</h1><formname="form1"><br><inputtype="text"name="URL_Textbox"size="60"><br><br><inputtype="button"value=”跳转”onClick=",jump1()"><inputtype="button"value=”替换”onClick=",jump2()"></form></div></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，用户可以在文本框中输入一个URL;输入URL之后单击“跳转”按钮则可以跳转到相应页面，如图9.14所示。此时单击“后退”按钮，可以回到原来页面;如果在输入URL后单击“替换”按钮，也可以跳转到相应页面，但单击“后退”按钮回退到历史列表中的前一个页面，而不能返回图9.14左边的页面，这是因为在历史列表中，原来页面己经将下一个页面替换。上一页下一页返回9.2浏览器对象

9.2.8navigator对象

navigator对象就是浏览器对象，用于获得与浏览器相关的信息。通常在编写跨浏览器平台的Web页面时，击要首先判断浏览器的相关信息，然后决定如何编写源代码，此时可以使用navigator对象。

1.navigator对象的属性和方法

navigator对象支持的属性和方法如表9.11所示。2.navigator对象实例下面是一个使用navigator对象的例子，其源代码如下所示:<html><head><title>navigator对象实例</title></head><body><h2align="center">显示浏览器信息......</h2>上一页下一页返回9.2浏览器对象

<scriptlanguage="JavaScript"type="text/javascript"><!--document.write(“浏览器代码名称:"+window.navigator.appCodeName+"<br>")//访问navigator对象时。J以用window.navigator，也可以傲接用navigator。document.write("浏览器名称:"+navigator.appName+"<br>")document.write("b"+navigator.appVersion+"<br>")document.write("是否支持Java:"+navigatorjavaEnabledU+"<br>")document.write("MIME类型数:"+navigator.mimeTypes.length+"<br>")上一页下一页返回9.2浏览器对象

document.write("操作系统台:"+navigator.platform+"<br>")document.write("插件数:"+navigator.plugins.length+"<br>")document.write("用户代理:"+navigator.userAgent+"<br>")--></scripb</body></html>在浏览器中打开该文件，效果如图9.15所示。上一页下一页返回9.2浏览器对象

9.2.9screen对象screen对象表示用户屏慕，它提供了屏慕尺寸和颜色深度等信息。1.screen对象的属性screen对象的属性如表9.12所示。2.screen对象实例下面是一个使用screen对象的例子，其源代码如下所示<html><head><title>screen对象实例</title></head><body><h2align="center">显示屏幕信息......</h2>上一页下一页返回9.2浏览器对象

<scriptlanguage="JavaScript"type="text/,javascript"><！--document.write("屏幕允许高度："+window.screen.availHeight+"<br>")//访问screen对象时可以用window.screen，也可以傲接用screen。document.write(“屏幕允许宽度:"+screen.availWidth+"<br>")document.write("颜色深度:"+screen.colorDepth+"<br>")document.write(”屏幕高度:"+screen.height+"<br>")document.write(“屏幕宽度:"+screen.width+"<br>")-->上一页下一页返回9.2浏览器对象

</scripb</body></html>在浏览器中打开该文件，效果如图9.16所示。上一页下一页返回9.2浏览器对象

9.2.10form对象

当我们在网页中添加了form标记符之后，就创建了一个form对象。可以通过以下两种方式访问网页中的form对象:使用document.forms[]数组。该数组代表文档中的所有表单。使用该数组时，既可以用索引号，也可以使用名称。例如，如果文档中第一个form标记符的name属性为form1,那么可以通过document.form[0]或document.form['form1']来访问该form对象。直接使用表单名称。例如，对于上面那个表单对象，可以通过document.form1来访问。1.form对象的属性、方法和事件form对象的属性、方法和事件列表如表9.13所示。上一页下一页返回9.2浏览器对象

下面是一个使用form对象的例子，源代码如下所示<html><head><title>Form对象实例</title><scriptlanguage="JavaScript"type="text/javascript"><!--functionshow(){newWin=window.open("","","height=200,width=350")newWin.document.write("文档中的表单信息如下：<p>,}}.newWin.document.write("<ultype='square'>")上一页下一页返回9.2浏览器对象

newWin.document.write("<li>action="+document.forml.action+"</li>");newWin.document.write("<li>length="+document.forml.length+"</li>");newWin.document.write("<li>method="+document.forml.method+"</li>");newWin.document.write("<li>name="++"</li>");newWin.document.write("<li>target="+document.forml.target+"</li>");newWin.document.write("</ul>")returnfalse;//使ouSubmit的值false，则不执行action指定的动作。上一页下一页返回9.2浏览器对象

}//--></script></head><body><formaction="/bin/process.asp"method="post"name="form1"target="_top"onReset="alert('您单击了重置按钮’)”onSubmit="returnshow()">上一页下一页返回9.2浏览器对象

<h3align="center">单击提交按钮显示有关的表单信息:</h3><divalign="center"><table><tr><td>用户名:</td><td><input></td></tr><tr><td>密码:</td><td><inpub</td></tr><tr><td><inputtype="submit"name="button2"value='，提交”></td><td><inputtype="reset"name="button3"value="重置"></td></tr></table></div>上一页下一页返回9.2浏览器对象

</fnrm></body></html>

在浏览器中打开该文件，如果用户单击“重置”按钮，则弹出一个提示框，之后将重置用户在表单中填写的数据;如果用户单击“提交”按钮，则弹出一个新窗口，显示与表单有关的各种信息(form标记符的encoding属性没有设置，因此返回默认值)，如图9.17所示;另外，由于show()函数返回false，因此表单不再提交到action指定的URL。2.访问表单元素只有form对象并不能构成一个有用的表单，要使表单能够起到传递信息的作用，其中必须包含各种表单元素，例如，text(文本框)、radio(单选框)、checkbox(复选框)、button(按钮)等。由于这些表单元素都是包含在表单中，因此它们都是form的子对象，可以直接使用名上一页下一页返回9.2浏览器对象

称进行访问。例如，如果一个名称为form1的表单中包含一个名称为myTextl的文本框，那么可以使用document.forml.myTextl来访问该文本框。另外，还可以使用form对象的elements属性来访问表单元素。elements属性是一个代表表单中所有元素的数组，数组元素值的顺序与表单中出现的顺序相同。下面是一个通过使用elements属性来显示表单中所有表单元素名称的例子，其源代码如下所示:<html><head><title>Formelements属性实例</title><scriptlanguage="JavaScript"type="text/,javascript"><！--functionshow()上一页下一页返回9.2浏览器对象

{newWin=window.open("","","height=180,width=280")newWin.document.write("文档中共包含”+document.forml.length+"个元索，分别是:<p>").for(i=0;i<document.forml.length;i++){newWin.document.write("<ultype='circle'>")newWin.document.write("<li>"+document.forml.elements[iJ.name+"</li>");newWin.document.write("</ul>")}}上一页下一页返回9.2浏览器对象

//--></script></head><body><fnrmname="form1”>文本框1:<inputname="textl"><p>文本框2:<inputname="text2"><p><inputtype="button"name="buttonl"value="显示表单中的元索信息"onClick="show()"></fnrm></body></html>上一页下一页返回9.2浏览器对象

在浏览器中打开该文件，当单击“显示表单中的元素信息”按钮时将在一个新窗口中显示出当前文档中表单的所有元素，如图9.18所示。3.表单处理当用户单击了表单中的提交按钮之后，用户在表单中填写或选择的内容将被传送到服务器端特定的程序(由action属性指定，通常是CGI程序或ASP程序等)，由该程序进行具体的处理。对表单数据的处理通常包括三个部分:数据解码、数据操作和返回信息，这些处理通常都需要服务器端程序来进行。由于本书不涉及服务器端编程，因此清读者参阅其他书籍以了解如何在服务器端进行表单处理。上一页下一页返回9.2浏览器对象

虽然最终的表单处理通常都需要服务器端的支持，但还是有一些工作可以由客户端脚本来做，最典型的一项工作就是表单验证。表单验证是指确定用户提交的表单数据是否合法，例如是否所有必须填的字段都填写了等。如果表单验证由服务器端程序来做，则会带来相应的网络开销和服务器开销，因为每次提交都需要与服务器端程序交互。如果能将表单验证工作放到客户端来做，由于相应的脚本己经随着网页下载到了客户端，因此可以大大减少各种开销，使得只有合法的表单数据才被提交到服务器。下面是一个简单的表单验证例子，它要求用户填写所有必要的字段，源代码如下所示:上一页下一页返回9.2浏览器对象

<html><head><title>表单验证实例</title><scriptlanguage="JavaScript"type="text/javascript"><!--functionvalidator(){if(.value==""){alert("您还没有输入姓名呢!”);returnfalse;//如果没填写姓名，那么不提交数据到action指定的程序}上一页下一页返回9.2浏览器对象

if(document.forml.idNumber.value==""){alert("您还没有输入身份证号呢!”);returnfalse;//如果没填写身份证号，那么不提交数据到action指定的程序}if(document.forml.eMail.value=="")alert('，您还没有输入电子邮件呢!”);returnfalse;//如果没填写电子邮件，那么不提交数据到action指定的程序}}</scripb</head><body>上一页下一页返回9.2浏览器对象

<divalign="center"><formaction="/process.asp"method="post"name="fnrml”nnSubmit="returnvalidator()"><h2>个人信息</h2><tablebgcolor="efefef"border="1"><tr><tdalign="right">姓名:<td><inputname="name"><tr><tdalign="right">身份证号:<td><inputname="idNumber"><tr>上一页下一页返回9.2浏览器对象

<tdalign="right">电子邮件:<td><inputname="entail"></table><br><inputtype="submit"value='，提交”><inputtype="reset"></form></div></body></html>在浏览器中打开该文件，输入“姓名”和“电了信箱”，然后单击“提交”按钮，则会弹出一个提示信息，如图9.19所示。上一页下一页返回9.2浏览器对象

9.2.11select对象

在学习HTML时我们就己经知道，单独的表单并没有实际意义，只有借助表单元素才能起到传递数据的作用。由于表单元素的种类比较多，此处不再一一介绍(实际上前面己经多次用到了按钮对象)，以下以最常用的选项菜单为例，说明表单元素在JavaScript中的应用。选项菜单使用户可以在由多个选项构成的列表或菜单中选择一个或多个选项。当用户在表单中使用select标记符时，即创建了一个选项菜单对象。在选项菜单标记符select中，使用option标记符创建每一个具体的选项。在表单中

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

教学材料HTML DHTML教程-第九章

文档简介

温馨提示

最新文档

评论

教学材料HTML DHTML教程-第九章

文档简介

温馨提示

最新文档

评论

相关文档