第8章 对象模型及事件处理

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第8章对象模型及事件处理目录8.1BOM和DOM8.2window对象8.3document对象8.4location对象

8.5history对象8.6navigator对象8.7screen对象8.8form对象8.9DOM节点8.10JavaScript的对象事件处理程序8.11综合案例8.1BOM和DOM8.1.1BOM8.1.2DOM8.1.1BOM BOM是BrowserObjectModel（浏览器对象模型）的缩写，该模型由一组浏览器对象组成，如图8-1所示。8.1.2DOM DOM（DocumentObjectModel，文件对象模型）属于BOM的一部分，用于对BOM中的核心对象document进行操作。HTML文件中的DOM结构如图8-2所示。8.2window对象8.2.1window对象的属性8.2.2window对象的方法8.2.1window对象的属性 window对象的属性如表8-1所示。8.2.2window对象的方法 window对象还提供了一些其他方法，如表8-2所示。8.2.2window对象的方法 【例8-1】显示窗口的宽、高和设置计时器，页面初次加载时依次显示两个提示框，延时5000ms后再调用hello()，显示欢迎信息的对话框。8.3document对象8.3.1document对象的属性8.3.2document对象的方法8.3.1document对象的属性 document对象的属性如表8-3所示。8.3.2document对象的方法 document对象的方法如表8-4所示。8.3.2document对象的方法 【例8-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文件中的元素。浏览者填写表单中的选项后，单击“统计结果”按钮，弹出消息框显示统计结果。8.4location对象8.4.1location对象的属性8.4.2location对象的方法8.4.1location对象的属性 location对象的属性如表8-5所示。8.4.2location对象的方法 location对象提供了以下3种方法，用于加载或重新加载页面中的内容，location对象的方法如表8-6所示。8.5history对象8.5history对象 history对象提供了back()、forward()和go()方法来实现针对历史访问的前进与后退功能，如表8-7所示。8.6navigator对象8.6navigator对象 navigator对象中包含浏览器的相关信息，如浏览器名称、版本号和脱机状态等。navigator对象的属性如表8-8所示。8.7screen对象8.7screen对象 每个window对象的screen属性都引用一个screen对象，screen对象中存放着有关客户端显示屏幕的信息，包括浏览器屏幕的信息与显示器屏幕的信息。screen对象的属性如表8-9所示。8.8form对象8.8.1form对象的属性8.8.2form对象的方法8.8.1form对象的属性 form对象的属性如表8-10所示。8.8.2form对象的方法

form对象的方法如表8-11所示。8.9DOM节点8.9.1Node对象8.9.2Element对象8.9.3NodeList对象8.9.1Node对象

Node对象的属性用于获得该节点的类型，如表8-12所示。8.9.2Element对象

Element对象继承了Node对象，是Node对象中的一种，常用的属性如表8-13所示。8.9.3NodeList对象

NodeList对象是一个节点集合，其item(index)方法用于从节点集合中返回指定索引的节点，length属性用于返回节点数量。【例8-3】DOM节点示例。8.10JavaScript的对象事件处理程序8.10.1对象的事件8.10.2常用的事件及处理8.10.3表单对象与交互性8.10.1对象的事件

事件（Event）是文件对象模型（DOM）的一部分，每个HTML元素都包含一组可以触发JavaScript代码的事件，但并非每种事件都会产生结果，因为JavaScript只是识别事件的发生。为了使对象能够对某一事件做出响应，就必须编写事件处理函数。

对象事件有以下3类。用户引起的事件，如网页装载、表单提交等。引起页面之间跳转的事件，主要是超链接。表单内部与界面对象的交互，包括界面对象的改变等。这类事件可以按照应用程序的具体功能自由设计。8.10.2常用的事件及处理

1．浏览器事件

浏览器事件主要由Load、UnLoad、DragDrop及Submit等事件组成。【例8-4】本例是一个在提交时检查条件是否满足要求的程序。8.10.2常用的事件及处理

2．鼠标事件

常用的鼠标事件有MouseDown、MouseMove、MouseUp、MouseOver、MouseOut、Click、Blur及Focus等事件。

3．键盘事件

常用的键盘有事件KeyDown事件、KeyPress事件、KeyUp事件、Change事件、Select事件、Select事件和Resize事件。8.10.3表单对象与交互性

表单事件最常用在form元素中，调用form对象一般格式为：<formname="表单名"action="URL"表单事件="JavaScript代码"method="post">…><inputtype="表项类型"name="表项名"value="默认值"事件="JavaScript代码"…>…</form>8.10.3表单对象与交互性

【例8-5】本例中，窗体myForm包含了一个text对象和一个按钮。当用户单击button1按钮时，窗体的名字就将赋给text对象；当用户单击button2按钮时，函数showElements将显示一个警告对话框，里面包含了窗体myForm上的每个元素的名称。8.11综合案例8.11综合案例

【例8-6】使用JavaScript实现商品复选框的全选效果。当用户单击“全选”复选框时，所有商品前面的复选框都被选中；再次单击“全选”复选框，所有商品前面的复选框都被取消选中。习题81．编写程序实现按时间随机变化的网页背景，如图8-10所示。2．使用window对象的setTimeout()方法和clearTimeout()方法设计一个简单的计时器。当单击“开始计时”按钮后启动计时器，文本框从0开始计时；单击“暂停计时”按钮后暂停计时，如图8-11所示。3．编写程序实现年月日的联动功能，当改变“年”“月”菜单的值时，