事件处理器作为浏览器对象的属性


我们已经介绍了对象的概念,我们可以通过定义属性和方法来定义对象。不仅如此,对象还具有与之相关的事件。由于JavaScript中的内建对象并没有相关的事件,因此在前面的内容中我们并没有提到事件这个概念。但是,BOM对象则具有相关的事件。

那么,BOM对象都具有哪些事件呢?

当特定的操作发生或者状态改变时,事件将被触发。例如,当用户在页面上单击时、或单击页面上的超链接时,或者当鼠标指针移过某段文字时,都可能触发相应的事件。另外一个经常用到的事件是页面的load事件,当页面加载时将触发这个事件。

那么,事件对我们有什么用呢?

为了说明事件的作用,让我们来看一个例子,当用户在页面上的任何地方单击鼠标时,我们希望弹出一个菜单。假定我们写好了产生弹出菜单的函数,但是我们怎么知道什么时候让菜单弹出呢?或者换句话说,我们什么时候调用这个产生弹出菜单的函数呢?因此,我们需要以某种方法捕获用户单击页面的事件,并且确保一旦单击页面的事件发生时,产生弹出菜单的函数即被调用。

为了实现这个功能,需要使用一种称为事件处理器(event handler)的机制。当事件发生时,事件处理器将连接到需要执行的事件处理代码。事件处理器提供了当事件发生时捕获事件、并且执行相应的事件处理程序的机制。通常我们把在代码中加入事件处理器称为“将事件处理代码连接到事件”。这有点类似于设置一个闹钟—— 当某个事件发生时,使闹钟振铃。对于一个闹钟来说,这个触发事件就是当到达某一确定的时间点时。

事件处理器由关键字on加上要处理的事件名组成。例如,click事件的事件处理器为onclick,load事件的事件处理器为onload。

相关文章:将事件处理器作为HTML标记的属性

通过事件处理器,可以使用多种方法将事件处理代码连接到事件。在本章中,我们将介绍两种最简单的办法。这两种方法不但被当前的浏览器所支持,而且自Netscape 2浏览器就开始使用,甚至更早的浏览器也支持这两种方法。在第12章中将介绍其他较新的且更加易于标准化的添加事件的方法。

将事件处理器作为浏览器对象的属性

下面来看一看将事件处理代码连接到事件的第二种方法。

对于第二种方法,首先需要定义当事件发生时所要执行的函数。然后,再把相应对象的事件处理器属性设置为我们所定义的函数。

下面用一个例子进行说明:

<html>

<body>

<script language="JavaScript" type="text/javascript">

function linkSomePage_onclick()

{

alert('This link is going nowhere');

return false;

}

</script>

<A href="somepage.htm" name="linkSomePage">

Click Me

</A>

<script language="JavaScript" type="text/javaScript">

window.document.links[0].onclick = linkSomePage_onclick;

</script>

</body>

</html>

将上面的代码保存为ch5_examp4.htm文件。

与上一个例子类似,我们定义了一个linkSomePage_onclick()函数。并用该函数的返回值指出我们是否希望执行事件的默认行为。

接下来定义了一个<A>标记,我们要捕获的正是<A>标记的click事件。注意,在该标记中并没有定义任何包含事件处理器或函数的属性。

事件处理函数与对象事件处理器的连接是通过脚本的最后一行代码来实现的,如下面的代码所示:

<script language="JavaScript" type="text/javaScript">

document.links[0].onclick = linkSomePage_onclick;

</script>

我们已经知道,document.links[0]将返回对应于页面上第一个超链接的A对象,即名为linkSomePage的超链接对象。只需将该超链接对象的onclick属性设置为我们所定义的事件处理函数linkSomePage_onclick—— 这样就可以将事件处理函数连接到对象的事件处理器。注意,此处在函数名之后并没有一对圆括号。当用户单击超链接之后,事件处理函数linkSomePage_onclick()就会被执行。

第一种方法相对来说更加简单,那么什么时候应该使用第二种方法呢?

使用第二种方法最常见的情况就是,当需要捕获某个对象的事件,但是这个对象并没有直接的HTML标记来添加事件处理器属性,这时就需要使用第二种方法。另外,当我们想通过代码动态地改变某个事件处理器所连接的事件处理函数时,使用第二种方法则比较有效。

 

下面来看一看另外一个例子,在下面的例子中,将图片的click事件连接到一个事件处理函数,以随机地改变页面上所显示的图片。

<html>

<head>

<script language="JavaScript" type="text/javascript">

var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif");

function changeImg(imgNumber)

{

var imgClicked = document.images[imgNumber];

var newImgNumber = Math.round(Math.random() * 3);

while (imgClicked.src.indexOf(myImages[newImgNumber]) != -1)

{

newImgNumber = Math.round(Math.random() * 3);

}

imgClicked.src = myImages[newImgNumber];

return false;

}

</script>

</head>

<body>

<img name="img0" src="usa.gif" border="0" onclick="return changeImg(0)">

<img name="img1" src="mexico.gif" border="0" onclick="return

changeImg(1)">

</body>

</html>

将该页面保存为ch5_examp5.htm文件。要进行测试,我们还需要4个图片文件,你可以自己创建4幅图片,也可以从本书所提供的代码下载中获得这4幅图片。

在浏览器中加载该页面,代码的效果将如图5-3所示:

图  5-3

当单击某一幅图片,将会看到它变成了另一幅随机选取的图片。

代码解说

在上面的例子中,在页面代码的开始处定义了一个脚本块,并在脚本块的第一行定义了一个页面级变量myImages。该变量是一个包含各图片名称字符串的数组。如下所示:

var myImages = new

Array("usa.gif","canada.gif","jamaica.gif","mexico.gif");

接着定义了changeImg()函数,该函数将被用来连接到页面图片的<IMG>标记的onclick事件处理器。在这里,我们将两个图片的onclick事件处理器都连接到同一事件处理函数,实际上,我们可以将任意多个事件处理器连接到同一个函数。changeImg()函数可以接受一个参数,该参数表示触发click事件的img对象在images数组中的索引值—— 通过该参数我们就知道需要对哪一个被单击了的图片进行处理。

在changeImg()函数的第一行,定义了一个变量imgClicked,该变量引用了被单击的图片所对应的img对象。传入的imgNumber参数表示触发click事件的img对象在images数组中的索引值,因此通过document.images[imgNumber]就能得到被单击的图片所对应的img对象。相应的代码如下所示:

function changeImg(imgNumber)

{

var imgClicked = document.images[imgNumber];

接下来,把变量newImgNumber的值设置为一个0~3之间的随机数。Math.random()方法将返回一个0~1之间的随机数,只需再乘以3,即Math.random() * 3就能得到一个0~3之间的随机数。然后,使用了Math.round()方法对其进行四舍五入,就可以得到一个0~3之间的整数(即0、1、2或3)。用这个随机的整数作为myImages数组的索引,就能从myImages数组中随机地选择一幅图片。获得该随机数的代码如下所示:

var newImgNumber = Math.round(Math.random() * 3);

接下来是一个while循环语句,该while循环的作用是确保随机选出的图片不是当前被单击的那幅图片。如果当前图片对象的src属性中包含了表示随机图片名称的myImages[newImgNumber]字符串,则表示随机选出的图片与当前被单击的图片是同一幅图片,这时需要重新计算一个随机数,以选择另一幅图片。因此我们开始新一轮的循环,直到当前图片对象的src属性中不包含表示随机图片名称的myImages[newImgNumber]字符串时,indexOf()函数将返回–1,从而结束循环语句。相应的代码如下所示:

while (imgClicked.src.indexOf(myImages[newImgNumber]) != -1)

{

newImgNumber = Math.round(Math.random() * 3);

}

最后,我们将表示当前被单击图片的imgClicked对象的src属性设置为随机选出的图片。并返回一个false值,以取消图片的链接功能。这里,链接功能仅仅是为了提供一个onclick事件处理器。将imgClicked对象的src属性设置为随机图片的代码如下:

imgClicked.src = myImages[newImgNumber];

return false;

}

在下面的HTML标记中,把changeImg()函数连接到第一个<IMG>标记的事件处理器,并传入一个参数0。

<img name=img0 src="usa.gif" border="0" onclick="return changeImg(0)">

接着把changeImg()函数连接到第二个<IMG>标记的事件处理器,并传入参数1:

<img name="img1" src="mexico.gif" border="0" onclick="return

changeImg(1)">

在这里,向changeImg()函数传入参数1,以便让该函数知道当前单击图片所对应的img对象在images数组中的索引为1,即当前单击的是页面上的第二幅图片,我们需要用一幅随机选择的图片来替换第二幅图片。



相关阅读:
Mysql源码学习笔记 偷窥线程
PHP自动选择 连接本地还是远程数据库
PHP把汉字转为unicode的通用函数
安全配置和维护Apache WEB Server
功能说明:利用script来处理文本文件。
SQL Server常用管理命令小结
phpcms2008下的自定义url规则教程
HTML 超级链接详细讲解
dedecms中显示数字验证码的修改方法
ACCESS的参数化查询
js tr控制下面的tbody隐藏和显示
Fedora下解决apache配置出错
设计稿进行页面制作的流程和注意事项
一个能对访问者进行编号、记录访问次数、IP、时间的统计制作实例
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 纹路:“一言不合就举报”更需良好举报环境 床位租用合同 回乡记四放鞭炮烟花 五彩手环作文300字 说“羡慕”(转载)作文900字 都是缘分惹得祸 2015结婚主持词 姑娘不哭作文400字 有一种幸福叫陪伴作文 宿舍琐事 2013年乡镇计生工作体会 东极岛350字 质监系统作风建设心得体会 感人又励志的英文电影台词 求职信如何吸引招聘者眼球? 夜·月作文650字 在下中国梦的种子 职场营销秘诀:攻心为上 给我一个蓝天 缱倦流年,韶华蹉跎 追踪“导弹”妈妈作文1100字 △          细节打败爱情,也成就爱情。 沈阳棋盘山游记-----星落石枰遗神迹人行画里看云天 美国丽人影评 电影与人生 幸福年味作文500字 2016小学毕业班教师发言稿 诚信的分量 读《朋友》有感作文500字 “大肚子将军” 春姑娘来了作文500字 我的孤独我的美 2014年纪检述职述廉报告 滥竽充数(现代版) 情系宝带五年级组德育实践活动作文500字 消防专员述职报告 怕什么孤单 “黑心人” 关于我县能繁母猪保险工作情况的汇报 初中初三作文800字:我 #183;父亲 【假如,爱有天意】 小学支部学习实践活动第一阶段小结 小学五年级作文500字:帆船女子RS-X级决赛 当记忆碰上流年,浮华了所有 读《国学经典》有感作文450字 小学三年级作文750字:程老师,你到家了吗? 廉洁自律个人自查报告 关于战争的诗 文言词尾用法小议 学习贯彻标准化架子队建设管理情况汇报

Copyright © 2016 phpStudy |