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

Size: px

Start display at page:

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

幅项物柏
5 years ago
Views:

1 第 8 章 JavaScript 对象层次与事件处理 JavaScript 是一种面向对象的语言, 在 JavaScript 中的对象都是有层次的, 在本章里将会介绍 JavaScript 的对象层次和 JavaScript 的事件处理方式

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

3 8.1.1 JavaScript 对象模型 JavaScript 对象模型由以下四个部分组成 : JavaScript 语言核心部分 : 该部分主要包括 JavaScript 的数据类型运算符和表达式与数据类型相关的核心对象 : 该部分主要包括 JavaScript 中的一些与数据类型相关的内置对象, 如布尔对象日期对象数学对象数字对象字符串对象等与浏览相关的对象 : 该部分主要包括 Window 对象 Navigator 对象 Location 对象等与文档相关的对象 : 该部分主要包括 Document 对象 Form 对象 Image 对象等

4 8.1.2 客户端对象层次介绍 JavaScript 的主要作用是在浏览器窗口里显示 HTML 文档在 JavaScript 中使用 Document 对象表示 HTML 文档, 例如要在浏览器窗口里输出一句话, 则要使用 Document 对象中的 write 方法 : document.write(" 输出的内容 ");

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

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

7 8.2 事件驱动与事件处理事件驱动是 JavaScript 中事件处理的一种方法, 通过事件驱动可以调用 JavaScript 中的函数或方法

8 8.2.1 事件与事件驱动当文档或文档中的元素发生了某些动作时, 浏览器就会产生一个事件 (Event) 例如浏览加载文档完毕是 load 事件单击一个按钮是 click 事件双击鼠标是 dblclick 事件在键盘上按下一个键是 keypress 事件将鼠标从一个对象上滑过是 mouseover 事件 JavaScript 程序员可以事先定义好一个事件的处理程序, 一旦浏览器中产生了某个事件, 浏览器会就自动调用这个处理程序这种通过事件来调用程序的方式称为事件驱动

9 8.2.2 事件与处理代码关联在 JavaScript 中可以响应的事件有很多, 如单击鼠标 (click) 双击鼠标 (dblclick) 元素得到输入的焦点 (focus) 等在一个 HTML 文档中, 可能拥有很多个对象, 如单选框复选框普通按钮提交按钮等, 每个对象都有可能触发某个事件 ( 具体内容请参照书 )

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

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

12 8.2.5 设置对象事件的方法在 HTML 元素属性中设置对象事件在 JavaScript 代码中设置对象事件

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

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

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

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

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

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

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

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

21 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 属性 ( 具体内容请参照书 )

22 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 属性

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

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

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

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值