第8章 JavaScript对象层次与事件

第8章JavaScript对象层次与事件处理•JavaScript是一种面向对象的语言，在JavaScript中的对象都是有层次的，在本章里将会介绍JavaScript的对象层次和JavaScript的事件处理方式。8.1JavaScript的对象层次•JavaScript中的对象很多，这些对象并不都是独立存在的，而是有着层次结构。对象可以依照层次来进行调用。8.1.1JavaScript对象模型•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（BrowerObjectModel），该对象模型提供了独立于内容的、与浏览器窗口进行交互的对象。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本身所产生。因此，对于不同的浏览器来说，可以产生的事件有可能不同。即使是同一个浏览器，不同版本之间所能产生的事件都不可能完全相同。例如在IE6.0中可以产生activate事件，而在Netscape6.0中和IE5.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)与得到焦点相反，是指将焦点从文本框中移出去。在HTML4.01中规定A、AREA、LABEL、INPUT、SELECT、TEXTAREA和BUTTON元素拥有onfocus属性和onblur属性。但是在IE6.0与Netscape7.0中都支持BODY元素的onfocus和onblur属性。（具体内容请参照书。）8.3.6键盘事件•键盘事件通常是指在文本框中输入文字时发生的事件，与鼠标事件相似，键盘事件也分为按下键盘键事件（keydown）、释放键盘键事件（keyup）和按下并释放键盘事件（keypress）三种。三种事件的区别就与mousedown事件、mouseup事件和click事件的区别相似。在HTML4.01中规定INPUT和TEXTAREA元素拥有onkeydown属性、onkeyup属性和onkeypress属性。但是在IE6.0与Netscape7.0中都支持BODY元素onkeydown属性、onkeyup属性和onkeypress属性。8.3.7提交与重置事件•提交事件（submit）与重置事件（reset）都是在FORM元素中所产生的事件。提交事件是在提交表单时激发的事件，重置事件是在重置表单内容时激发的事件。这两个事件都能通过接收返回的false来取消提交表单或取消重置表单。（具体内容请参照书。）8.3.8选择与改变事件•选择事件（select）通常是指文本框中的文字被选择时产生的事件。改变事件（change）通常在文本框或下拉列表框中激发。在下拉列表框中，只要修改了可选项，就会激发change事件；在文本框中，只有修改了文本框中的文字并在文本框失去焦点时才会被激发。（具体内容请参照书。）8.4小结•JavaScript之所以可以与用户互动，是因为JavaScript的事件驱动与事件处理机制。由于事件驱动是由浏览器所产生的，所以不同的浏览器可以产生的事件是不相同的。在本章里介绍了HTML4.01标准中所规定的几种事件，这几种事件都是在JavaScript编程中常用的事件，希望读者可以熟练掌握。下一章中将会介绍JavaScript中的Window对象。