第 8 章 JavaScript 对象层次与事件处理

第 8 章 JavaScript 对象层次与事件处理

• JavaScript 是一种面向对象的语言，在 JavaScript 中的对象都是有层次的，在本章里将会介绍 JavaScript 的对象层次和 JavaScript 的事件处理方式。

8.1 JavaScript 的对象层次

• JavaScript 中的对象很多，这些对象并不都是独立存在的，而是有着层次结构。对象可以依照层次来进行调用。

8.1.1 JavaScript 对象模型• JavaScript 对象模型由以下四个部分组成： JavaScript 语

言核心部分：该部分主要包括 JavaScript 的数据类型、运算符和表达式。

• 与数据类型相关的核心对象：该部分主要包括 JavaScript中的一些与数据类型相关的内置对象，如布尔对象、日期对象、数学对象、数字对象、字符串对象等。

• 与浏览相关的对象：该部分主要包括 Window 对象、 Navigator 对象、 Location 对象等。

• 与文档相关的对象：该部分主要包括 Document 对象、 Form 对象、 Image 对象等。

8.1.2 客户端对象层次介绍

• JavaScript 的主要作用是在浏览器窗口里显示 HTML 文档。在 JavaScript 中使用 Document 对象表示 HTML 文档，例如要在浏览器窗口里输出一句话，则要使用 Document 对象中的 write 方法： document.write(" 输出的内容 ");

8.1.3 浏览器对象模型

• 浏览器对象模型简称为 BOM （ Brower Object Model ），该对象模型提供了独立于内容的、与浏览器窗口进行交互的对象。 BOM 是很多对象所构成，对象与对象之间有着相互联系。（具体内容请参照书。）

8.1.4 对象的引用

• 图 8-2 中显示了浏览器中各对象的层次，通过这个对象层次，程序员可以很方便地引用 HTML 文档中的各个对象。（具体内容请参照书。）

8.2 事件驱动与事件处理

• 事件驱动是 JavaScript 中事件处理的一种方法，通过事件驱动可以调用 JavaScript 中的函数或方法。

8.2.1 事件与事件驱动

• 当文档或文档中的元素发生了某些动作时，浏览器就会产生一个事件（ Event ）。例如浏览加载文档完毕是 load 事件、单击一个按钮是 click 事件、双击鼠标是 dblclick 事件、在键盘上按下一个键是 keypress 事件、将鼠标从一个对象上滑过是 mouseover 事件。

• JavaScript 程序员可以事先定义好一个事件的处理程序，一旦浏览器中产生了某个事件，浏览器会就自动调用这个处理程序。这种通过事件来调用程序的方式称为事件驱动。

8.2.2 事件与处理代码关联

• 在 JavaScript 中可以响应的事件有很多，如单击鼠标（ click ）、双击鼠标（ dblclick ）、元素得到输入的焦点（ focus ）等。在一个 HTML 文档中，可能拥有很多个对象，如单选框、复选框、普通按钮、提交按钮等，每个对象都有可能触发某个事件。（具体内容请参照书。）

8.2.3 调用函数的事件

• 在前面章节中所用到的示例，使用的大多都是静态脚本，而静态脚本是不能够响应用户的事件。而所谓的动态脚本是定义了事件处理程序的脚本，在某个事件发生时，浏览器会自动调用事先定义好的事件处理程序。（具体内容请参照书。）

8.2.4 调用代码的事件

• 上一节中介绍的调用函数的事件处理方法是使用得最多的事件处理方法，使用该方法的代码可读性比较强，并且在函数中可以输入多个 JavaScript 语句，能完成拥有复杂功能的程序。但是，有些时候事件所激发的响应比较简单，这就可以将响应的代码直接写在事件中。（具体内容请参照书。）

8.2.5 设置对象事件的方法

• 8.2.5.1 在 HTML 元素属性中设置对象事件

• 8.2.5.2 在 JavaScript 代码中设置对象事件

8.2.6 显式调用事件处理程序

• 从前面的例子中可以看出，在发生事件时，浏览器通常都会调用一个 JavaScript 函数或方法来响应事件。而在 JavaScript 中，事件并不是一定要由用户激发，也可以通过代码直接激发事件，以达到显式调用事件处理程序的目的，

8.2.7 事件处理程序的返回值

• 在 JavaScript 中并不要求事件处理程序有返回值。如果事件处理程序没有返回值，浏览器就会以默认情况进行处理。但是，在很多情况下程序都要求事件处理程序要有一个返回值，通过这个返回值来判断事件处理程序是否正确处理，或者通过这个返回值来判断是否进行下一步操作。在这种情况下，事件处理程序返回值都为布尔值，如果为 false 则阻止浏览器的下一步操作，如果为 true 则进行默认的操作。

8.2.8 事件与 this 运算符

• 由于事件通常都会调用一个函数，因此在函数体中处理数据时，常常需要使用到一些与对象相关的参数。此时就可以通过 this 运算符来传递参数。this 运算符代表的是对象的本身，（具体内容请参照书。）

8.3 常用的事件

• 浏览器中可以产生的事件有很多，不同的对象可能产生的事件也有所不同。例如文本框可以产生 focus （得到输入焦点）事件，而图像就不可能产生该事件。本节里将会介绍常用的事件以及可以触发这些事件的对象。

8.3.1 浏览器与事件

• 事件通常都是由浏览器所产生，而不是由 JavaScript 本身所产生。因此，对于不同的浏览器来说，可以产生的事件有可能不同。即使是同一个浏览器，不同版本之间所能产生的事件都不可能完全相同。例如在 IE 6.0中可以产生 activate 事件，而在 Netscape 6.0中和 IE 5.0中都不能产生该事件。（具体内容请参照书。）

8.3.2 鼠标移动事件

• 鼠标移动事件包含鼠标移动 (mousemove) 、鼠标离开对象（ mouseout ）、鼠标移到对象上（ mouseover ）三种。（具体内容请参照书。）

8.3.3 鼠标点击事件

• 鼠标点击事件分为单击事件（ click ）、双击事件（ dblclick ）、鼠标键按下（ mousedown ）和鼠标键释放（ mouseup ）四种。其中单击是指完成按下鼠标键并释放这一个完整的过程后产生的事件。 mousedown 事件是指在按下鼠标键时产生事件，并不去理会有没有释放鼠标键。 mouseup 事件是指在释放鼠标键时产生的事件，在按下鼠标键时并不会对该事件产生影响。（具体内容请参照书。）

8.3.4 加载与卸载事件

• 加载与卸载事件比较简单，分别为 load 与 unload 。其中 load 事件是在加载网页完毕时产生的事件，所谓加载网页是指浏览器打开网页； unload事件是卸载网页时产生的事件，所谓卸载网页是指关闭浏览器窗口或者从当前页面跳转到其他页面，即当前网页从浏览器窗口中卸载。（具体内容请参照书。）

8.3.5 得到焦点与失去焦点事件

• 得到焦点（ focus ）通常是指选中了文本框，并且可以在文本框中输入文字。失去焦点 (blur) 与得到焦点相反，是指将焦点从文本框中移出去。在 HTML 4.01 中规定 A、 AREA、 LABEL 、 INPUT 、 SELECT 、 TEXTAREA和 BUTTON 元素拥有 onfocus属性和 onblur属性。但是在 IE 6.0与 Netscape 7.0中都支持 BODY元素的 onfocus和 onblur属性。（具体内容请参照书。）

8.3.6 键盘事件

• 键盘事件通常是指在文本框中输入文字时发生的事件，与鼠标事件相似，键盘事件也分为按下键盘键事件（ keydown ）、释放键盘键事件（ keyup ）和按下并释放键盘事件（ keypress ）三种。三种事件的区别就与 mousedown 事件、 mouseup 事件和 click 事件的区别相似。在 HTML 4.01 中规定 INPUT 和 TEXTAREA元素拥有 onkeydown属性、 onkeyup属性和 onkeypress属性。但是在 IE 6.0与 Netscape 7.0中都支持 BODY元素 onkeydown属性、 onkeyup属性和 onkeypress属性。

8.3.7 提交与重置事件

• 提交事件（ submit ）与重置事件（ reset ）都是在 FORM 元素中所产生的事件。提交事件是在提交表单时激发的事件，重置事件是在重置表单内容时激发的事件。这两个事件都能通过接收返回的 false 来取消提交表单或取消重置表单。（具体内容请参照书。）

8.3.8 选择与改变事件

• 选择事件（ select ）通常是指文本框中的文字被选择时产生的事件。改变事件（ change ）通常在文本框或下拉列表框中激发。在下拉列表框中，只要修改了可选项，就会激发 change 事件；在文本框中，只有修改了文本框中的文字并在文本框失去焦点时才会被激发。（具体内容请参照书。）

8.4 小结

• JavaScript 之所以可以与用户互动，是因为 JavaScript 的事件驱动与事件处理机制。由于事件驱动是由浏览器所产生的，所以不同的浏览器可以产生的事件是不相同的。在本章里介绍了 HTML 4.01 标准中所规定的几种事件，这几种事件都是在 JavaScript编程中常用的事件，希望读者可以熟练掌握。下一章中将会介绍 JavaScript 中的 Window 对象。