WEB基础07 BOMEvent面向对象.docx

TableCell对象的常用属性有：

∙cellIndex：

返回单元格在某行的单元格集合中的位置；

∙innerHTML：

设置或返回单元格的开始标签和结束标签之间的HTML；

∙colSpan：

设置或返回单元格横跨的列数；

∙rowSpan：

设置或返回单元格横跨的行数。

2.DHTML其他对象

2.1.DHTML其他对象

2.1.1.DHTML对象模型回顾

DHTML对象模型如图－1所示：

图－1

其中，widnow对象、document对象已经在前面的课程中学习过，下面将学习其他对象。

2.1.2.screen对象

每个Window对象的screen属性都引用一个Screen对象，该对象中存放着有关显示浏览器屏幕的信息。

JavaScript程序将利用这些信息来优化它们的输出，以达到用户的显示要求。

例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用16位色还是使用8位色的图形。

另外，JavaScript程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

screen对象的常用属性有：

∙width：

返回显示器屏幕的宽度；

∙height：

返回显示屏幕的高度；

∙availWidth：

返回显示屏幕的宽度（除Windows任务栏之外）；

∙availHeight：

返回显示屏幕的高度（除Windows任务栏之外）。

2.1.3.history对象

history对象是window对象的一部分，可通过window.history属性对其进行访问。

history对象包含用户（在浏览器窗口中）访问过的URL。

history对象的常用属性为length属性，标识浏览器历史列表中的URL数量，其常用方法有：

∙back（）：

加载history列表中的前一个URL;

∙forward（）：

加载history列表中的下一个URL;

∙go（num）：

加载history列表中的某个具体页面。

2.1.4.location对象

Location对象存储在Window对象的Location属性中，表示那个窗口中当前显示的文档的Web地址。

它的href属性存放的是文档的完整URL。

如果把一个含有URL的字符串赋予Location对象或它的href属性，浏览器就会把新的URL所指的文档装载进来，并显示出来。

除了设置location.href用完整的URL替换当前的URL之外，Location对象的reload（）方法可以重新装载当前文档；而replace（）可以装载一个新文档而无需为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。

2.1.5.navigator对象

Navigator对象包含的属性描述了正在使用的浏览器，可以使用这些属性进行平台专用的配置。

Navigator对象的实例是唯一的，可以用Window对象的navigator属性来引用它。

Navigator对象包含有关浏览器的信息，提供了各种属性以读取浏览器的信息，且因为浏览器的不同，属性也不尽相同。

可以使用如下代码来遍历navigator对象的属性及值：

1.varshowText="Navigator对象属性列表：

\n";

2.for（varpropnameinnavigator）

3.{

4.    showText+=propname+":

"+

5.            navigator[propname]+"\n";

6.}

7.alert（showText）;

3.事件

3.1.事件概述

3.1.1.事件概述

事件指DHTML对象在状态改变、操作鼠标或键盘时触发的动作。

事件分为三类：

∙鼠标事件：

如onclick、ondblclick、onmouseover、onmouseout等；

∙键盘事件：

如onkeydown、onkeyup等；

∙状态改变事件：

如onblur、onfocus、onload、onchange等。

事件触发后将会产生一个event对象，该对象用于记载事件相关的所有信息，如引发事件的节点对象、位置等信息。

3.1.2.事件句柄

通过一个事件句柄，可以在某个事件发生时对某个元素进行某种操作，可用的事件句柄如图－2所示：

图－2

3.2.事件处理

3.2.1.事件定义

如果需要HTML元素能够响应某种动作，则需要为其相应的事件句柄定义js代码。

这样，当事件发生时，将直接调用所定义的js代码。

为元素定义事件时，最常用的方式是，在html属性定义中直接处理事件，代码如下所示：

1.

其中，method为js代码中所定义的方法。

另外，也可以在js代码中为元素动态的定义事件，常用于动态创建页面元素时。

代码如下所示：

1.//btnObj为一个按钮对象

2.btnObj.onclick=method;

3.//或

4.btnObj.onclick=function（）{

5.                alert（“hello”）;    

6.        };

其中，method为已经存在的一个方法。

如果希望取消某事件，则只需要将false返回给事件句柄即可，代码如下所示：

1.<元素onXXX=“returnfalse；”/>

3.2.2.事件的处理机制

当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理，这种处理方式，我们称为冒泡处理机制。

查看如下代码：

1.

1pxsolidblack;height:

100px;"

2.            onclick="alert（'div'）;">

3.

1pxsolidred;height:

50px;"

4.            onclick="alert（'p'）;">

5.ptext

6.

7.            onclick="alert（'button'）;"/>

8.

9.

上述代码运行时，如果单击按钮，则将逐一触发按钮的单击事件、段落的单击事件和

也可以在js代码中直接使用event关键字获取event对象，代码如下所示：

1.functionfunc（）{

2.alert（event.clientX+":

"+event.clientY）;

3.}

而在firefox浏览器中，可以在html代码中直接使用event关键字获取event对象，但是如果在js代码中，使用event关键字，则会发生异常。

因为，对于firefox浏览器而言，它不认可在js中使用event关键字。

因此，为解决各浏览器的兼容问题，可以在HTML代码中，在事件句柄定义时，使用event关键字将事件对象作为参数传入方法，代码如下所示：

1.divtext

Js代码中，使用参数接收event对象即可，代码如下所示：

1.//firefox浏览器

2.functionfunc（e）{

3.alert（e.clientX+":

"+e.clientY）;

4.}

3.3.3.使用event对象

对于event对象，经常需要获得事件源，事件源即触发事件的元素，是事件的目标节点。

在IE、Chrome、Opera这几种浏览器中，可以使用event.srcElement来获取；而在Firefox浏览器中，需要使用event.target来获取。

因此，可以使用如下代码来兼顾各种浏览器：

1.//考虑浏览器兼容问题

2.functionfunc（e）{

3.    varobj=e.srcElement||e.target;

4.    alert（obj.nodeName）;    //DIV

5.}

4.面向对象基础

4.1.对象概述

4.1.1.对象概述

对象是一种特殊的数据类型，由属性和方法封装而成。

其中，属性指与对象有关的值，调用方式为：

对象名.属性名；方法指对象可以执行的行为或可以完成的功能，调用方式为：

对象名.方法名（）。

js代码中，定义对象有三种方式：

∙创建对象的实例

∙创建对象的模板

∙使用JSON

4.2.创建对象

4.2.1.创建通用对象

可以使用Object对象创建通用的对象，代码如下所示：

1.functionTestObject（）{

2.    varpersonObj=newObject（）;

3.    //添加属性

4.    personObj.name="John";

5.    personObj.age=50;

6.    //添加方法

7.    personObj.say=

8.            newFunction（“alert（‘hello!

’）;”）;

9.    //测试

10.    personObj.say（）;        //hello!

11.    alert（personObj.age）;    //50

12.}

4.2.2.创建对象的模板

可以定义构造函数，以创建自定义的对象，语法为：

1.functionObjName（参数1,参数2,…）{}

查看如下代码：

1.functionPerson（n,a）{

2.    //定义name和age属性

3.    this.name=n;

4.    this.age=a;

5.    //定义方法showName

6.    this.showName=function（）{

7.        alert（“MyNameis”+this.name）;

8.    };

9.    //定义方法introduceSelf

10.    this.introduceSelf=introFunc（）;

11.}

12.functionintroFunc（）{

13.    alert（this.name+“:

”+this.age）;

14.}

上述代码，创建了名为Person的自定义对象的模板，并为其定义了属性和方法。

可以基于此模板创建多个对象。

代码如下所示：

1.//测试对象

2.functiontest（）{

3.varo1=newPerson（“mary”,18）;

4.alert（o1.age）;

5.o1.showName（）;

6.o1.introduceSelf（）;

7.varo2=newPerson（“john”,20）;

8.alert（o2.age）;

9.o2.showName（）;

10.o2.introduceSelf（）;

11.}

4.2.3.JSON

JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，它使用名/值对的方式定义对象。

其中：

∙名称需要使用“”引起来

∙多对定义之间使用，隔开

∙名称可以是属性

∙字符串类型的属性值，需要使用“”引起来

代码如下所示：

1.varobj={

2.    “name":

“jerry",

3.    “age":

29

4.};

5.//测试对象

6.alert（obj.name）;

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

WEB基础07 BOMEvent面向对象 WEB 基础 07 BOMEvent 面向 对象

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。