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


我们已经介绍了对象的概念,我们可以通过定义属性和方法来定义对象。不仅如此,对象还具有与之相关的事件。由于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 交通频道 作文范文 化学与材料科学学院2011年度工作总结范文 风筝比美550字 开心大冒险观后感 柳树下的父亲 美丽的风景 笨,真想冲过去 芈月传经典台词黄歇_芈月传经典语录搞笑 爱不是占有,爱是让一切变得更好的能量 我是一个胆小的人作文700字 苏州流动人口子女受教育的现状问题与对策 小学五年级作文450字:柯南事迹薄(1) 国庆节征文三篇 一面风情深有韵 半笺柔情记心头 鼓浪屿 毛主席读书 今天是最快乐的一天600字 2016调查报告范文300字 晨雨350字 难忘的你作文700字 以后要做到的 学习科学发展观心得:切实提高领导科学发展的能力 《阿凡提》观后感 可爱的阿蒙 除夕夜看烟花作文 思维的“跳糟” 学习《区域经济规划》课程心得体会 别后寄友生(一作崔鲁诗) 怀念朋友的句子 有关怀念从前过去的句子 爱你是一种罪过,更是一种幸福 老师作文150字 小学四年级作文350字:奇妙的互联网 学习励志经典语录 我希望变成女生 世界上没有穷的男人只有不肯努力的男人 2011年目标管理考核迎检汇报材料 副县长在县国税工作会议上的讲话 杀人犯/1,小说 小学六年级作文200字:要战胜自己 二年级作文学会感恩 黑暗中的光芒作文 孩童感冒门道多 你都造吗? 关于珍惜幸福的句子 少先队大队辅导员安全责任书 诗人的眼泪——张培疑惑 薰衣草,开在心中的普罗旺斯 喜报范文 2015乡安全生产汇报 2.14最幸福的情人节祝福语 临澧县工商局部署开展无照经营整治行动 “绿夏”实践队心得系列:后勤篇 如何为人处事 为人处事的方法 为人处事的名言文章三百篇

Copyright © 2016 phpStudy |