第12章对象模型与事件处理JavaScript是一种面向对象的语言，使用对象模型可以描述JavaScript对象之间的层次关系。

另外，JavaScript还可以捕捉到用户在浏览器中的操作，并对不同的操作进行响应，这就是JavaScript的事件驱动与事件处理。

12.1 对象模型JavaScript中的对象并不是独立存在的，对象与对象之间存在着层次结构，对象模型的作用就是描述这些层次结构。

12.1.1 对象模型简介对象模型是用来描述对象的逻辑层次结构以及其标准的操作方法的一个应用程序接口（API）。

在JavaScript中，可以将对象模型分为以下几个组成部分。

核心部分（Core）：JavaScript的核心部分主要包括JavaScript的数据类型、运算符、表达式，以及JavaScript中内置的全局对象、全局属性和全局函数等。

前面章节中所介绍的都是JavaScript的核心部分。

浏览器对象模型（Browser Object Model）：简称为BOM。

浏览器对象模型提供了用户与浏览器之间交互的对象以及操作的接口。

这些对象中，有很大一部分是与网页内容不相关的，如代表屏幕的Screen对象，代表浏览器的Navigator对象等。

文档对象模型（Document Object Model）：简称为DOM。

文档对象模型是由World Wide Web（W3C）委员会所定义的标准文档对象模型，该模型是一个能够让程序或脚本动态地访问和更新文档内容、结构和样式的应用程序接口。

DOM的版本可以分为DOM1、DOM2和DOM3。

BOM虽然不是W3C中的标准，但是众多浏览器都能实现该对象模型，因此也被称为0级DOM。

12.1.2 客户端对象层次浏览器的主要作用是显示一个HTML文档，在这种情况下，JavaScript使用Document对象代表HTML文档，使用Window对象代表显示该HTML文档的浏览器窗口，如图12-1所示。

在图12-1中所加载的HTML文件为光盘目录里"代码\第12章\sample01.htm"文件，该文件的内容如代码清单12-1所示。

请注意加粗的文字。

代码清单12-1 简单的客户端对象层次从图顶层对象。

而Document对象是代表HTML文档的对象，因此，该对象是Window 对象下的子对象。

在前面章节中曾经介绍过，Document对象的write()方法可以在浏览器窗口中输出文字。

因此，完整调用 Document对象的write()方法应该如下：write()方法如以下代码：所示。

12.1.3 浏览器对象模型从12.1.2小节中可以看出，在JavaScript中对象之间并不是独立存在的，对象与对象之间有着层次关系。

如Document对象是Window对象的子对象，Window 对象是Document对象的父对象等。

浏览器对象模型就是用于描述这种对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

图12-2是BOM的结构示意图。

从图12-2中可以看出，Window对象是BOM中的顶层对象，该对象代表了浏览器窗口。

在Window对象之下有下述几个子对象。

Document对象：该对象代表浏览器窗口中所加载的文档。

使用Document对象可以操作文档中的内容。

在整个BOM中，只有Document对象是与HTML文档的内容相关的。

Frames数组：该数组代表浏览器窗口中的框架。

HTML中允许将一个浏览器窗口分为多个框架，每个框架中可以加载一个HTML文档。

在这种框架页中，每一个框架都是Frames数组中的一个元素。

而Frames数组中的每一个元素都是一个Window对象。

History对象：该对象代表当前浏览器窗口的浏览历史。

通过该对象可以将当前浏览器窗口中的文档前进或后退到某一个已经访问过的URL（统一资源定位符）。

Location对象：该对象代表当前文档的URL。

URL分为几个部分，如协议部分、主机部分、端口部分等。

使用Location对象可以分别获得这些部分，并且可以通过修改这些部分的值来加载一个新文档。

Navigator对象：该对象是浏览器对象，代表了浏览器的信息。

该对象与Window 对象不同，Window对象可以用于控制浏览器窗口的一些属性，如浏览器窗口大小、位置等。

而Navigator对象包含的是浏览器的信息，如浏览器的名称、版本号等。

Screen对象：该对象代表当前显示器的信息。

使用Screen对象可以获得用户显示器的分辨率、可用颜色数量等信息。

Document对象代表HTML文档，而HTML文档中包括了有很多元素，BOM也将这些元素看成了不同的对象。

从图12-2中可以看出，Document对象还有下述几个子对象。

Anchors数组：该数组代表了文档中的所有锚。

数组中的每一个元素都是一个锚对象。

每一个锚对象都对应着HTML文档中的一个包含name属性的<a>标签，通过锚对象可以获得锚的命名，以及超链接中的文字。

Applets数组：该数组代表了嵌在网页中的所有小程序。

数组中的每一个元素都是一个Applet对象，通过Applet对象可以获得Java小程序的公有字段。

Embeds数组：与Applets类似，但建议使用Embeds数组。

Forms数组：该数组代表文档中的所有表单。

数组中的每一个元素都是一个Form 对象。

每一个Form对象都对应着HTML文档中的一个<form>标签。

通过Form对象可以获得表单中的各种信息，也可以提交或重置表单。

由于表单中还包括了很多表单元素，因此，Form对象的子对象还可以对这些表单元素进行引用，以完成更具体的应用。

Images数组：该数组代表文档中的所有图片。

数组中的每一个元素都是一个Image对象。

每一个Image对象都对应着HTML文档中的一个<img>标签。

通过Image对象可以获得图片的各种信息。

Links数组：该数组代表文档中的所有超链接。

数组中的每一个元素都是一个Link对象。

每一个Link对象都对应着HTML文档中的一个包含href属性的<a>标签，通过Link对象可以获得超链接中URL的各部分信息。

Location对象：该对象与Window对象中的Location对象完全相同。

由于该对象与HTML文档并没有太大关系，因此，该对象是反对使用的对象，建议使用Window对象的Location子对象。

BOM并不是W3C中的标准，因此，不同的浏览器所支持的BOM中的对象、对象的属性和方法都有可能不同。

从图12-2中可以看出，Document对象下有很多子对象，因此Document对象是一个十分重要的对象。

事实上，大多数浏览器都支持Document对象。

在W3C正式定义DOM之前，BOM中的Document分支就已经被众多浏览器支持。

DOM被正式定义之后，分为了三个层次，分别为1级DOM（DOM Level 1）、2级DOM（DOM Level 2）和3级DOM（DOM Level 3）。

而BOM中的Document分支被称为0级DOM（DOM Level 0），因为该分支定义了文档功能的基本功能。

12.1.4 对象模型中对象的引用通常在一个文档中，可以按照BOM中的对象层次来引用其中的对象。

引用方式如下：顶层的Window对象可以使用"window"来引用。

第二层的Document对象、History对象、Location对象、Navigator对象和Screen 对象，可以使用"document"、"History"、"Location"、"Navigator"和"Screen"来引用。

第二层的Frames数组，可以通过<frame>标签中的name属性值引用，也可以通过frames[]数组来引用。

第三层中的所有数组，都可以通过相应标签中的name属性值引用，也可以通过数组下标的形式引用。

第四层中的对象都是Form对象的子对象，这些子对象代表了表单中的不同元素。

对于这些元素，可以使用相应标签中的name属性值引用，也可以使用elements[]数组下标的方式引用。

12.1.4.1 通过name属性值引用对象通过name属性值来引用对象，是引用对象的一种十分常用的方法。

请看代码清单12-2，注意加粗的文字。

代码清单12-2 通过name属性值引用对象上述代码为光盘目录里"代码\第12章\ sample02.htm"的内容，其运行结果如图12-3所示。

在本例中，创建了一个名为myForm的表单，该表单下有一个名为myName的文本框。

如果要引用该文本框，可以根据BOM的示意图来获得其引用方式，如图12-4所示。

从图12-4中可以看出，如果要引用本例中的文本框，可以通过以下代码进行引用：以Document 对象，使用表单名myForm来引用Form对象，使用文本框名myName来引用Text 对象。

这种引用方式就是使用name属性值的引用方法。

Text对象的value属性可以用于存取文本框中的文本内容。

因此，以下代码的作用是在文本框中输出12.1.4.2 通过数组下标引用对象从图12-2中可以看出，在BOM中，有很多对象都是以数组的形式出现的，如Form 对象等。

对于这种以数组形式出现的对象，可以使用数组下标的方式来引用该对象。

请看代码清单12-3，注意加粗的文字。

代码清单12-3 通过数组下标引用对象上述代码为光盘目录里"代码\第12章\sample03.htm"的内容，其运行结果如图12-5所示。

在本例中，创建了一个表单，在该表单中有两个表单元素，这两个表单元素都是文本框。

如果要引用这两个文本框，可以根据BOM的示意图来获得其引用方式，如图12-6所示。

从图12-6用。

其中，第同样，可以通过Text对象的value属性来设置文本框中的文本内容。

12.1.4.3 混合的引用方式从前面的章节中可以看出，使用对象相应元素的name属性值和数组下标都可以引用对象。

事实上，这种对象的引用方式还可以混合使用。

例如，第1个对象使用name属性值的引用方式，而第2个对象使用数组下标的引用方式，或者反过来引用也可以。

以代码清单12-3为例，在该代码中，第1个文本框的使用方式如下所示：12.1.4.4 省略的引用方式在sample02.htm和sample03.htm中，每个对象的引用，都是从Window对象开始向下一层层引用的。