浏览器的内部对象

1、在前面几章中，详细讨论了javascript语句的核心部分。我们介绍了如何使用变量和数据，以及施加在这些数据上的各种操作，还介绍了如何使用判断语句来选择一个执行分支，讨论了如何使用循环语句来循环执行某一段代码，以及如何创建用户自定义函数。javascript是一门基于对象的语言，在第4章中，我们介绍了如何使用javascript中的内建对象。然而，我们所关注的不仅仅是javascript语句本身，我们还需要学习如何编写浏览器的脚本程序。通过浏览器提供的浏览器对象模型，可以编写出功能更加强大的web页面。不仅javascript是基于对象的语言，浏览器本身也是由很多对象所组成的。当javascr

2、ipt代码在浏览器中运行时，可以采用与访问javascript内建对象同样的方法来访问浏览器提供的对象。那么，浏览器提供了哪些对象供我们使用呢？浏览器提供了非常多的对象供我们使用。例如，window对象，它表示浏览器的窗体。实际上，我们已经使用过window对象的两个方法，即alert()方法和prompt()方法。为了简便起见，在前面的内容中我们把这两个方法称为函数，但实际上，alert()和prompt()都是window对象的方法。浏览器还提供了一个document对象，用于表示加载在浏览器中的页面本身。实际上，我们已经使用过该对象的一些属性和方法，在第1章中，我们就通过使用docume

3、nt对象的bgcolor属性来改变页面的背景颜色。另外，我们还使用过document对象的write()方法向页面写入信息。浏览器还提供了大量的对象，用于表示页面上html对应的元素。例如，我们用标记在页面上插入一幅图片，每一个标记都对应着一个img对象。通常把浏览器为javascript所提供的对象的集合称为浏览器对象模型(browser object model，bom)。注意：我们还会经常遇到一个术语，即文档对象模型(document object model，dom)。在本书中，术语dom表示w3c标准的文档对象模型，在第13章中我们将进一步讨论文档对象模型。这些javascript之

4、外附加的功能也可能存在潜在的弊端。浏览器所提供的对象模型在很大程度上依赖于我们所使用的是何种类型的浏览器以及浏览器的版本。某种浏览器所支持的对象可能并不被另一种浏览器所支持，另外，不同浏览器对同一对象所支持的属性和方法也可能不同。幸运的是，当前的浏览器对w3c的标准支持要比以往的浏览器好得多，这意味着如果我们的代码遵循w3c的标准，那么我们的代码就能更好地在不同的浏览器中正常运行。但是值得注意的是，某些浏览器的编写者可能采用不同的方式来支持w3c的标准。我们将在第12章中详细讨论ie和firefox浏览器在浏览器对象模型(bom)上的差异。在本章中，我们将把注意力放到bom的核心功能上，重点介

5、绍对于所有浏览器都通用的bom对象。在javascript中仅使用这些通用的bom对象，就能完成大量的工作。如果需要获得更详细的信息，请访问如下网址：/dhtml/dhtml_ domreference.asp和/library/default.asp?url=/workshop/author/dhtml/ dhtml_node_entry.asp。5.1 浏览器对象在本章中将介绍对于大多数浏览器都适用的浏览器对象模型(bom)。在第4章中，我们介绍了一些javascript的内建对象，如string

6、对象和date对象。对于大多数内建对象，都需要在使用前先创建其实例，而某些对象如math对象，在页面加载时就自动地创建，我们可以直接使用这些对象，而无须自己去创建它们。除内建对象外，页面中的javascript代码在运行时还可以访问大量由web浏览器提供的对象。与math对象类似，浏览器提供的对象并不需要显式地去创建，我们可以直接使用这些对象。浏览器对象模型为我们提供了大量的对象、方法、属性和事件。bom是十分重要的，并且bom非常庞大。但是，很多情况下我们只需要使用bom中不到10%的对象、属性和方法。在这一章中，我们将介绍bom中最常用的部分，如图5-1所示。从某种程度上来说，这些对象模型

7、是所有浏览器都通用的。后面的章节将进一步介绍这些bom对象，学习完本书之后，你就能充分发挥bom的威力。图 5-1浏览器对象模型是一个具有层次的对象结构，在层级的顶端是window对象。window对象代表了浏览器的框架以及与浏览器相关的所有一切，如滚动条、导航按钮等都包含在window对象中。页面包含在window的框架中。在bom中，document对象用于代表页面本身。图5-2描述了window对象与document对象的关系。图 5-2下面将逐一介绍这些bom对象。5.1.1 window对象window对象代表浏览器的框架(frame)或者浏览器的窗体，web页面就加载在浏览器的框架

8、或窗体中。在某种程度上，window对象也代表了浏览器本身，它包含了大量关于浏览器的属性。例如，通过window对象的某些属性，可以查询到用户所使用的是哪一种浏览器、用户所访问过的页面的历史记录，以及浏览器窗口的大小、用户计算机屏幕的大小等信息。还可以使用window对象来访问或修改浏览器状态栏中显示的文本信息、在浏览器中加载一个新页面、甚至打开一个新的浏览器窗口。window对象是一个全局对象，因此可以直接使用全局对象的属性和方法，而无须写出全局对象的对象名。在javascript中，可以在代码中的任何位置访问全局函数和全局变量。实际上，全局函数和全局变量都是该全局对象的属性，当声明一个全局

9、函数或全局变量时，实际上是创建了该全局变量的一个属性。例如，从本书开始就经常使用的alert()函数，实际上就是window对象的alert()方法。尽管在前面的内容中我们将代码简单地写为：alert(hello!);但实际上完整的语句是：window.alert(hello!);由于window对象是一个全局对象，因此使用第一个语句也是完全正确的。window对象的某些属性本身也是一个对象。无论是ie浏览器还是nn浏览器，都包含document对象、navigator对象、history对象、screen和location对象。其中，document对象代表了浏览器中的页面；history对

10、象则包含了用户所访问过的页面的历史信息；navigator对象包含了浏览器自身的相关信息；screen对象则包含了客户端计算机显示器显示能力的信息；最后一个location对象则包含了浏览器所加载的当前页面的url的详细信息。在本章中，我们将逐一介绍这几个重要的对象。使用window对象下面来看一个简单且有用的例子：使用window对象改变浏览器状态栏中显示的默认信息。状态栏通常位于浏览器窗口的底部，浏览器通常在状态栏中显示真正加载的页面的相关信息。例如，在ie或firefox浏览器中，当一个页面加载完毕后，浏览器将在状态栏中显示done。在下面的示例中，我们将把状态栏中的信息修改为hello

11、 and welcome。要改变浏览器窗口状态栏的默认信息，只需要设置window对象的defaultstatus属性。要把状态栏中的信息修改为hello and welcome，可使用如下代码：window.defaultstatus = hello and welcome;另外，由于window对象是一个全局对象，因此也可以直接使用如下代码：defaultstatus = hello and welcome;以上两个语句都是正确而有效的。但是，在defaultstatus属性前加上对象名window可以更加清楚地表明defaultstatus属性是window对象的一个属性，而不会使人误认

12、为defaultstatus是一个变量名。对于像defaultstatus这样不经常使用的属性和方法，在其前面加上window对象名是非常必要的。对于我们非常熟悉的属性和方法，如document对象和alert()方法，则可以省略掉window对象名。完整的页面代码如下所示：window.defaultstatus = hello and welcome;将该页面保存为ch5_examp1.htm文件，并在浏览器中加载该页面。我们就能看到在浏览器的状态栏中显示了我们指定的信息。值得强调的是，在一个web页面中，我们所定义的函数或变量不应该与bom对象或bom对象的属性及方法同名。否则，也许ja

13、vascript并不会报告错误，但是你将得到意想不到的结果。例如，下面的代码声明了一个defaultstatus变量，当我们试图使用window对象的defaultstatus属性将浏览器状态栏中显示的信息修改为welcome to my website时，实际修改的是变量defaultstatus的值，而浏览器状态栏中的信息将不会发生任何改变。var defaultstatus;defaultstatus = welcome to my website;要避免这个问题，我们就应该定义一个与window对象的defaultstatus属性不冲突的变量名。window对象具有很多的属性和方法，但

14、是在本章中，我们将重点关注window对象的history属性、location属性、navigator属性、 screen属性和document属性。window对象的以上5个属性实际上都包含了一个相应的对象，即history对象、location对象、navigator对象、screen对象和document对象，而且每一个对象都具有自己的一系列属性和方法。在下面的内容中，我们将按顺序逐一学习这5个对象，以充分使用bom带给我们的强大功能。5.1.2 history对象history对象保存了用户所访问过的页面的信息。我们通常把这些访问过的页面列表称为浏览器的历史栈(history sta

15、ck)。通过这个历史栈，我们就可以单击浏览器工具栏的“后退”或“前进”按钮来返回到我们已经访问过的页面。通过window对象的history属性，我们就能访问history对象。与javascript中的内建对象array类似，history对象具有一个length属性。使用length属性，就能获得浏览器历史栈中页面的个数。history对象具有back()方法和forward()方法。当调用history对象的back()方法时，浏览器所加载的当前页面的location将改变为历史栈中当前页面的前一个页面。当调用history对象的back()方法时，则当前页面的location将改变为历

16、史栈中当前页面的后一个页面。history对象还具有go()方法。该方法可以接受一个参数，该参数指出以当前页面为基准，在历史栈中前进或后退几个页面。例如，如果我们想返回到当前页面的上一个页面，可以使用如下代码：history.go(-2);如果要在历史栈中跳转到当前页面之后的第3个页面，可以使用如下代码：history.go(3);.注意，go(1)等价于back()方法，而go(1)等价于forward()方法。5.1.3 location对象location对象包含了大量有关于当前页面位置的有用信息。它不仅包含了当前页面的统一资源定位器(uniform resource locator，u

17、rl)信息，还包含了提供web服务的服务器信息、连接到服务器的端口号及所使用的协议信息。通过location对象的href属性、hostname属性、port属性和protocol属性，就可以获得这些信息。但是，这些信息与访问页面的方式直接相关，即与是从访问服务器上的页面还是访问本机上的页面直接相关。例如在前面的例子中，我们就是直接从本机的硬盘上加载页面。除了可以获得当前页面的位置信息之外，还可以使用location对象的方法来改变当前页面的位置信息，或者刷新当前的页面。如果我们要导航到另一个页面，可以采用两种方法。一是将location对象的href属性设置为另一个页面的url，二是使用lo

18、cation对象的 replace()方法。这两个方法的效果是完全相同的，都能够改变所加载的页面。但是这两个方法的区别在于：使用replace()方法将从浏览器的历史栈中移除当前页面，并用新页面进行替换；而使用href属性时，仅仅把新页面加在历史栈的顶部。这意味着如果使用了replace()方法，用户将无法通过单击浏览器工具栏的“后退”按钮返回到之前的页面。但如果使用的是href属性，则用户可以使用浏览器工具栏的“后退”按钮返回到前一个页面。例如，如果我们要用一个名为mypage.htm的新页面替换当前的页面，使用replace()方法时可以采用如下代码：window.location.rep

19、lace(mypage.htm);这行代码将加载mypage.htm页面，并把浏览器的历史栈中有关于当前页面的所有信息替换为新页面mypage.htm的信息。如果要加载新页面mypage.htm，并且把它添加到浏览器历史栈的顶部，则可以使用location对象的href属性：window.location.href = mypage.htm;这样，浏览器在加载新页面后，将把新页面添加到历史栈的顶部。在这两种方法的示例中，我们都在表达式的前面加上了window对象的对象名window，由于window对象是一个全局对象，因此也可以省略该对象名，将代码改写为：location.replace(my

20、page.htm);或location.href = mypage.htm;5.1.4 navigator对象navigator对象是window对象的一个属性，ie浏览器和firefox浏览器都支持navigator对象。navigator这个名称似乎更具有历史性而不是描述性，一个更恰当的名称应该是“浏览器对象”。实际上，navigator对象包含了运行当前脚本的浏览器和操作系统的大量相关信息。navigator对象最常见的用途是用于区分不同的浏览器，以便针对不同的浏览器作出相应的处理。使用navigator对象的属性，可以知道用户正在使用的是何种浏览器、浏览器的版本号、以及用户计算机所安装

21、的操作系统。根据这些信息，可以确保将用户导向到与其所使用的浏览器相兼容的页面上。本章的最后一小节将专门讨论这个重要的问题。5.1.5 screen对象screen对象是window对象的一个属性，它包含了大量有关于客户端计算机显示能力的信息。screen对象具有height属性和width属性，这两个属性以像素为单位，分别表示客户端计算机显示屏的垂直高度和水平宽度。在后面的例子中，我们将使用screen对象的另一个属性，即colordepth属性。该属性表示客户端计算机显示屏颜色的色彩位数。5.1.6 document对象 代表页面本身的对象对于window对象来说，document对象可能是

22、bom中最重要和最常用的对象之一。通过document对象，可以访问到页面上由html标记所定义的各种对象的属性和方法。遗憾的是，不同浏览器的bom在document对象上存在较大的差异。在本章中将重点介绍对所有浏览器都通用的document对象的属性和方法。关于document对象的更高级的内容将在第12和第13章中进行介绍。document对象具有很多与html文档相关联的属性，这些属性都是数组类型的。其中几个重要的属性是forms数组、images数组和links数组。ie浏览器还支持一些其他的数组属性，如all数组属性，它表示页面上html标记所对应的所有对象的一个数组。然而，我们应该

23、重点学习使用那些能够跨浏览器支持的对象，这样我们的web页面就不会局限于某一种特定的浏览器。稍后将介绍images数组和links数组。对于另一个属性forms数组，我们将在第6章作为一个单独的主题进行介绍。下面先来看一个简单而有用的例子，以说明如何使用document对象的属性和方法。1. 使用document对象我们已经学习了document对象的一些属性和方法，如write()方法和bgcolor属性，下面用一个简单的例子来说明如何使用document对象。在这个例子中，我们将根据用户显示器所支持的色彩位数来设置页面的背景颜色。显示器所支持的色彩位数通常称为色彩深度。如果用户的显示器仅支

24、持黑和白两种颜色，那么将页面的背景色设置为鲜红色就毫无意义。通过使用javascript，可以根据用户显示器的色彩深度，将页面的背景色设置为用户实际可见的颜色。相应的代码如下所示：switch (window.screen.colordepth)case 1:case 4:document.bgcolor = white;break;case 8:case 15:case 16:document.bgcolor = blue;break;case 24:case 32:document.bgcolor = skyblue;break;default:document.bgcolor = whi

25、te;document.write(your screen supports + window.screen.colordepth +bit color);将上面的代码保存为ch5_examp2.htm文件。当我们在浏览器中加载页面时，页面的背景色将由我们的计算机显示器的当前色彩深度决定。另外，页面上将输出一条信息，以告诉你显示器的当前色彩深度是多少。我们可以改变显示器的色彩深度来测试上面的代码。对于windows操作系统，只需在桌面上单击鼠标右键，在弹出的菜单中选择“属性”选项。在“设置”标签卡下，有一个“颜色质量”的区域，在其中就可以改变系统支持的色彩深度。在改变了色彩深度之后，再刷新浏览

26、器，就能看到对于不同的色彩深度，页面显示了不同的背景色。注意：对于netscape和firefox浏览器，需要关闭浏览器并重新打开浏览器，才能看到页面根据显示器的色彩深度显示了不同的背景色的效果。代码解说我们已经介绍过，window对象具有screen属性，screen属性本身是一个screen对象。screen对象具有一个colordepth属性，该属性的返回值为1、4、8、15、16、24或32。它表示显示器上每个像素所具有的颜色的比特位数，即色彩深度(计算机屏幕就是由很多个像素组成的)。假设screen.colordepth属性的值为n， 则该色彩深度能表示2的n次方种颜色。例如，col

27、ordepth属性的值为1，表示只有两种颜色有效；而colordepth属性的值为8，则表示具有2的8次方即256种颜色。对于现在的大部分显示器来说，至少具有8比特位的色彩深度，通常都具有16位、24位或32位的色彩深度。在这个例子中，首要的任务是根据用户实际可见的色彩深度来设置页面的背景颜色。我们使用了一个switch语句来实现这个功能，该switch语句的匹配条件就是window.screen.colordepth的值。switch (window.screen.colordepth)我们并不需要为每一种色彩深度都设置一个不同的页面背景色，因为对于普通的web用户来说，相近的色彩深度的效果

28、是相似的。我们可以把具有不同的色彩深度值，但显示效果接近的情况设置为相同的页面背景色。例如，对于色彩深度为1或4的情况，我们都可以把页面背景色设置为白色。如下面的代码所示，我们声明了一个case 1:语句，但是未给出该情况下的执行代码。如果colordepth匹配了该语句，则执行流将经过该语句，到达后面的case 4:语句：在case 4:语句中，我们把页面背景色设置为白色。在case 4:语句代码的结尾处，使用了一个break语句来跳离switch语句，这样就不会对该case语句之后的其他条件进行匹配。case 1:case 4:document.bgcolor = white;break;

29、对于色彩深度为8、15或16的情况，采用了相同的处理方法。对于这三种情况，都将页面背景色设置为蓝色，代码如下所示：case 8:case 15:case 16:document.bgcolor = blue;break;最后，对于色彩深度为24或32的情况，将页面背景色设置为天蓝色，代码如下所示：case 24:case 32:document.bgcolor = skyblue;break;在switch语句的最后，使用了一个default语句来表示未能匹配前面case语句的其他情况。在这个默认的情况中，再次把页面背景色设置为白色，代码如下所示：default:document.bgcolo

30、r = white;在接下来的代码中，使用了document对象的write()方法，在前面的例子中我们已经多次使用过该方法。在这里，使用write()方法在页面上输出显示器当前所设置的色彩深度值，代码如下所示：document.write(your screen supports + window.screen.colordepth +bit color)在这里，我们再次使用在前面的例子中已经多次用到的document对象。在第1章中，我们使用了document对象的bgcolor属性来改变页面的背景颜色，并且在多个例子中都使用了document对象的write()方法，以向页面输出html

31、和文本信息。下面来学习一下document对象的几个略显复杂的属性。这几个属性都是数组属性。首先将介绍的第一个属性是document.images数组属性，它是由页面上每一幅图片所对应的img对象所组成的一个img对象数组。2. images数组对象我们可以使用如下标记在html页面中插入一幅图片：在javascript中为了实现对页面的脚本编程，对于上面的这行html代码，浏览器将为我们自动创建一个对应的img对象，并且对象名为myimage。对于页面上的每一幅图片，浏览器都将创建一个相应的img对象。页面上的每一个img对象都被保存在images数组中。images数组是document对

32、象的一个属性。对于页面上的第一幅图片，用数组元素document.images0表示，对于第二幅图片，用数组元素document.images1表示，依此类推。如果需要，可以声明一个变量用于引用images数组中的某一个img对象，以使代码更加容易阅读。例如，我们可以编写如下代码：var myimage2 = document.images1;变量myimage2将包含一个对images数组中索引为1的img对象的引用。此后，在代码中，可以使用myimage2来代替document.images1，二者的效果完全相同。也可以通过名称来访问images数组中的img对象。例如，对于一个由html

33、的标记所创建的img对象，可以通过document对象的images数组属性来访问，代码如下所示：document.imagesmyimage由于document.images属性是一个数组对象，因此它也具有javascript内建对象array所具有的相关属性，如length属性。我们可以通过document.images.length获得页面所包含的图片总数。img对象本身就具有许多非常有用的属性。其中最重要的是img对象的src属性。改变img对象的src属性就可以改变img对象所加载的图片。请看下面的例子。var myimages = new array(usa.gif,canada.

34、gif,jamaica.gif,mexico.gif);var imgindex = prompt(enter a number from 0 to 3,);document.imagesimg1.src = myimagesimgindex;将上面的代码保存为ch5_examp3.htm文件。另外，我们还需要4个图片文件，这4个图片文件的文件名分别为usa.gif、canada.gif、jamaica.gif和mexico.gif。你可以自己创建这4个图片文件，也可以从本书的代码下载中获得。在浏览器中加载该页面时，将弹出一个提示框，将要求你输入一个03的数字。根据所输入数字的不同，页面上将显

35、示一幅不同的图片。代码解说在上面的代码中，先用html标记定义了一幅图片。注意，此处把标记的src属性设置为空，并且把name属性的值设置为img1。接下来的脚本块用于决定显示哪一幅图片。在脚本块的第一行，定义了一个myimages数组，数组的各元素的值就是各图片的名称。在这个例子中，我们把图片文件与html文件放在同一个目录中，因此可以直接采用相对路径而无须定义图片的路径。如果图片文件与html文件并不在同一个目录中，则应该输入图片文件的绝对路径，例如c:myimagesmexico.gif。接着，用prompt()方法要求用户输入一个03的数字，这个输入的数字将作为数组的索引，用来在myi

36、mages数组中访问图片源。var imgindex = prompt(enter a number from 0 to 3,);最后，把img对象的src属性设置为myimages数组中索引为用户输入数字的数组元素，该元素的值是一个表示图片名称的字符串。document.imagesimg1.src = myimagesimgindex;值得注意的是，代码document.imagesimg1表示的是document.images数组中名称为img1的一个img对象。在这里，我们使用了图片的名称来访问这个img对象，这个名称正是在html标记中用name属性定义的。另外，我们也可以使用doc

37、ument.images0来访问这个img对象，因为该图片是页面上第一个(也是唯一一个)图片，因此它的索引为0。3. links数组对于每一个具有href属性的超链接标记，浏览器将创建一个对应的a对象。a对象最重要的属性就是href属性，它对应于标记中的href属性。通过a对象的href属性，可以知道该超链接指向何处，并且即使在页面已经加载完毕之后，仍然可以通过修改a对象的href属性，从而修改超链接的指向。links数组用于表示页面上所有a对象的集合，就像前面看到的images数组包含了页面上所有的img对象一样。5.1.7 将事件处理代码连接到web页面的事件在第4章中已经介绍了对象的概念

38、，我们可以通过定义属性和方法来定义对象。不仅如此，对象还具有与之相关的事件。由于javascript中的内建对象并没有相关的事件，因此在前面的内容中我们并没有提到事件这个概念。但是，bom对象则具有相关的事件。那么，bom对象都具有哪些事件呢？当特定的操作发生或者状态改变时，事件将被触发。例如，当用户在页面上单击时、或单击页面上的超链接时，或者当鼠标指针移过某段文字时，都可能触发相应的事件。另外一个经常用到的事件是页面的load事件，当页面加载时将触发这个事件。那么，事件对我们有什么用呢？为了说明事件的作用，让我们来看一个例子，当用户在页面上的任何地方单击鼠标时，我们希望弹出一个菜单。假定我们

39、写好了产生弹出菜单的函数，但是我们怎么知道什么时候让菜单弹出呢？或者换句话说，我们什么时候调用这个产生弹出菜单的函数呢？因此，我们需要以某种方法捕获用户单击页面的事件，并且确保一旦单击页面的事件发生时，产生弹出菜单的函数即被调用。为了实现这个功能，需要使用一种称为事件处理器(event handler)的机制。当事件发生时，事件处理器将连接到需要执行的事件处理代码。事件处理器提供了当事件发生时捕获事件、并且执行相应的事件处理程序的机制。通常我们把在代码中加入事件处理器称为“将事件处理代码连接到事件”。这有点类似于设置一个闹钟 当某个事件发生时，使闹钟振铃。对于一个闹钟来说，这个触发事件就是当到

40、达某一确定的时间点时。事件处理器由关键字on加上要处理的事件名组成。例如，click事件的事件处理器为onclick，load事件的事件处理器为onload。通过事件处理器，可以使用多种方法将事件处理代码连接到事件。在本章中，我们将介绍两种最简单的办法。这两种方法不但被当前的浏览器所支持，而且自netscape 2浏览器就开始使用，甚至更早的浏览器也支持这两种方法。在第12章中将介绍其他较新的且更加易于标准化的添加事件的方法。1. 将事件处理器作为html标记的属性第一种方法是最常见的，即把事件处理器和关联的代码作为html标记的属性和属性值添加在相应的html标记中。下面将创建一个简单的ht

41、ml页面，该页面用标记创建了一个超链接。相应地，浏览器将创建一个对应的a对象。我们都知道，a对象具有一个click事件，当用户单击超链接时，将触发该超链接的click事件。这个页面的代码如下：click me按照现在的情况，这个页面除具有一个超链接之外并无其他的功能。单击超链接，将导航到一个新的页面somepage.htm，这是我们创建的另一个页面。对于超链接，我们还没有加上事件处理器。正如上文所述，要为某个bom对象添加事件处理器，最常用且最简单的方法就是直接将事件处理代码作为html标记的属性，添加在html标记中。在本例中，需要捕获的就是由标记所定义的a对象的click事件。当用户单击这

42、个超链接时，我们希望能捕获该click事件，并执行相应的事件处理代码。因此，需要为标记添加一个事件处理器，即onclick事件处理器。可以把onclick事件处理器作为一个属性添加在标记中，并把该属性的值设置为事件触发时要执行的处理代码。可以将标记修改为如下代码：click me现在，为标记添加了一个属性：onclick=alert(you clicked?)。此时，当用户单击了这个超链接，将弹出一个消息对话框。之后，超链接才会执行默认的功能，并链接到由标记的href属性所定义的页面。如果连接到事件处理器的代码只有一行，这个办法就是可行的。但是当超链接被单击时，所执行的事件处理代码是多行时，那

43、该怎么办呢？其实很简单，我们只需要把希望执行的事件处理代码定义为一个函数，然后在onclick事件处理器中调用这个函数。请看下面的代码：function linksomepage_onclick()alert(you clicked?);return true;click me在上面的脚本块中，创建了一个linksomepage_onclick()函数，这是一个标准的函数。同时为了提高代码的可读性，我们为函数取了一个具有描述性的名字。此处，使用了objectname_event()这样的形式作为函数的名称。采用这种形式的名称，可以很直接地看到这个函数与页面上的哪一个对象关联，并且连接的是哪一个

44、事件。因此，在上面这个例子中，将函数定义为linksomepage_onclick()，即这个函数关联的是名为linksomepage的超链接对象的onclick事件处理器。这种命名规范只是程序员的一种约定俗成，它并不是强制性的。只要在代码中使用一致的命名规范，我们也可以使用自己喜欢的其他命名方式。现在onclick属性连接到了调用linksomepage_onclick()函数的代码。因此，当用户单击了这个超链接，linksomepage_onclick()函数就将被执行。值得注意的是，linksomepage_onclick()函数具有一个返回值，且在本例中，返回值为true。此外，在定义

45、onclick属性时，在函数名之前使用了一个return语句，将函数的返回值返回给onclick属性，这是为什么呢？由事件处理器 onclick=return linksomepage_onclick()返回的值将被javascript用来决定超链接是否执行它的默认行为，即是否链接到一个新页面去。如果返回值为true，则超链接将执行它的默认行为，并链接到somepage.htm页面。如果返回值为false，则默认的事件处理功能 链接到somepage.htm页面 将不会被执行，即超链接的默认事件处理行为被取消了。我们可以修改一下代码以进行测试，如下所示：function linksomepag

46、e_onclick()alert(this link is going nowhere);return false;此时，你将发现仅仅弹出了一个消息对话框，超链接并没有提供链接到somepage.htm页面的功能。某些对象和事件并不会使用事件处理器的返回值，因此有的时候返回值是多余的。另外，返回值为false时也并不一定总是能够取消对象的默认行为。出于浏览器发展的历史原因，对于某些浏览器有时当返回值为true时将取消对象的默认行为。通常，最好将返回值设置为true，在遇到特殊情况时再作出相应的处理，这样做比较保险。某些事件并不是直接由用户的行为所触发。例如，window对象具有load事件和u

47、nload事件，当页面加载完毕时将触发load事件，而当页面卸载时，将触发unload事件(页面卸载指的是用户关闭了浏览器，或者打开了其他页面)。实际上，window对象的事件处理器应放在标记中。例如，要为window对象的load事件和unload事件添加相应的事件处理器，可以使用如下代码：注意，这里把标记的language属性设置为javascript，因为标记并不包含在定义javascript脚本块的标记内。通常情况下，javascript就是默认的脚本语言，因此该language属性也可以省略。2. 将事件处理器作为浏览器对象的属性下面来看一看将事件处理代码连接到事件的第二种方法。对于

48、第二种方法，首先需要定义当事件发生时所要执行的函数。然后，再把相应对象的事件处理器属性设置为我们所定义的函数。下面用一个例子进行说明：function linksomepage_onclick()alert(this link is going nowhere);return false;click mewindow.document.links0.onclick = linksomepage_onclick;将上面的代码保存为ch5_examp4.htm文件。与上一个例子类似，我们定义了一个linksomepage_onclick()函数。并用该函数的返回值指出我们是否希望执行事件的默认行为

49、。接下来定义了一个标记，我们要捕获的正是标记的click事件。注意，在该标记中并没有定义任何包含事件处理器或函数的属性。事件处理函数与对象事件处理器的连接是通过脚本的最后一行代码来实现的，如下面的代码所示：document.links0.onclick = linksomepage_onclick;我们已经知道，document.links0将返回对应于页面上第一个超链接的a对象，即名为linksomepage的超链接对象。只需将该超链接对象的onclick属性设置为我们所定义的事件处理函数linksomepage_onclick 这样就可以将事件处理函数连接到对象的事件处理器。注意，此处在函

50、数名之后并没有一对圆括号。当用户单击超链接之后，事件处理函数linksomepage_onclick()就会被执行。第一种方法相对来说更加简单，那么什么时候应该使用第二种方法呢？使用第二种方法最常见的情况就是，当需要捕获某个对象的事件，但是这个对象并没有直接的html标记来添加事件处理器属性，这时就需要使用第二种方法。另外，当我们想通过代码动态地改变某个事件处理器所连接的事件处理函数时，使用第二种方法则比较有效。下面来看一看另外一个例子，在下面的例子中，将图片的click事件连接到一个事件处理函数，以随机地改变页面上所显示的图片。var myimages = new array(usa.gif

51、,canada.gif,jamaica.gif,mexico.gif);function changeimg(imgnumber)var imgclicked = document.imagesimgnumber;var newimgnumber = math.round(math.random() * 3);while (imgclicked.src.indexof(myimagesnewimgnumber) != -1)newimgnumber = math.round(math.random() * 3);imgclicked.src = myimagesnewimgnumber;ret

52、urn false;将该页面保存为ch5_examp5.htm文件。要进行测试，我们还需要4个图片文件，你可以自己创建4幅图片，也可以从本书所提供的代码下载中获得这4幅图片。在浏览器中加载该页面，代码的效果将如图5-3所示：图 5-3当单击某一幅图片，将会看到它变成了另一幅随机选取的图片。代码解说在上面的例子中，在页面代码的开始处定义了一个脚本块，并在脚本块的第一行定义了一个页面级变量myimages。该变量是一个包含各图片名称字符串的数组。如下所示：var myimages = new array(usa.gif,canada.gif,jamaica.gif,mexico.gif);接着定义了changeimg()函数，该函数将被用来连接到页面图片的标记的onclick事件处理器。在这里，我们将两个图片的onclick事件处理器都连接到同一事件处理函数，实际上，我们可以将任意多个事件处理器连接到同一个函数。changeimg()函数可以接受一个参数，该参数表示触发click事件的img对象在images数组中的索引值 通过该参数我们就知道需要对哪一