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


我们已经介绍了对象的概念,我们可以通过定义属性和方法来定义对象。不仅如此,对象还具有与之相关的事件。由于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 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 G4722 G1875 G215 G569 G421 G6733 G7577 G8906 G1235 G4916 G7291 G1953 G245 G662 G1570 G6285 G719 G1836 G1346 G4781 G4908 G289 G6781 G9290 G7358 G1928 G1815 G325 G132 G4901 G6012 G6290 G7131 G5367 G184 G151 G5303 G1136 G6481 G7028 G575 G1744 G7660 G7693 G2344 G4937 G1234 G1814 G6252 G1492 G253 G2926 G883 G9275 G1231 G556 G241 G1306 G7646 G8103 G600 G1858 G9678 G6160 G7156 G825 G1125 G7249 G1809 G1350 G432 G9466 G7067 G785 G6404 G4663 G7008 G150 G823 G1514 G7529 G1201 G2353 G205 G7629 G9409 G6147 G677 G390 G8016 G9239 G456 G828 G8045 G491 G7145 G397 G7012 G1021 G6482 G2322 G7264 G1301 G9247 G96 G1294 G7133 G4824 G7005 G1653 G5307 G1213 G822 G4837 G1422 G411 G6227 G1571 G359 G1882 G6074 G7678 G21 G7077 G1272 G8918 G9645 G461 G1254 G1846 G8021 G7303 G1104 G76 G82 G621 G218 G8533 G2341 G8543 G555 G8013 G4802 G1364 G1153 G1342 G1861 G8905 G590 G4780 G668 G9261 G1304 G1638 G1395 G2914 G8003 G7158 G1833 G1873 G8128 G1856 G1841 G8709 G7346 G4612 G2103 G835 G8712 G381 G7240 G8932 G507 G29 G4054 G6273 G6752 G426 G211 G9473 G7119 G2333 G1567 G6153 G360 G4011 G5301 G7648 G8010 G8015 G6706 G614 G423 G8557 G9465 G72 G6018 G8901 G7030 G123

丹东 云霄 辽中 德阳 克拉玛依 惠山 招远 昭通 铁岭西 延吉西 军粮城北 定西 晋中 许昌东 郫县 诏安 七台河 高碑店东 南昌 延安 敦化 铜陵北 嵩明 鲘门 扬中 龙里北 舟山 洛阳 运城北 鞍山 西昌 邵阳北 绍兴 白山 三明 肇东 陵水 衡山西 嘉善 宜都 泰兴 泉州 汉口 东胜西 昌图西 锦州南 安阳东 怀化 黄南 亚龙湾 扬州 温州 南翔北 福安 金山北 永川东 安达 曲阜东 郑州西 天门 绍兴北 涪陵北 阳泉北 三亚 葫芦岛北 徐州 阳江 辽源 新泰 阿坝 孝感北 三穗 金寨 保山 高安 安阳 牟平 西双版纳 信阳 繁昌西 哈尔滨北 达州 新余 沈阳南 四平 扶余北 伊宁 郴州西 济源 水家湖 民权北 福鼎 如皋 奉化 全州南 安庆 太姥山 武汉 乐清 皮口 武昌 茂名 邯郸 资阳 马鞍山 三水南 泰安 包头东 衡阳东 南丰 仙桃西 安吉 罗源 山海关 平湖 惠州 资阳北 淄博 丹阳 莱州 巴东 关岭 盐城 锦州 格尔木 益阳 大英东 吉林 湛江 临安 襄汾西 渑池南 当涂东 辽阳 徐水 贺州 韶关 光明城 邯郸东 普安县 南江口 铜川 五龙背东 张家港 烟台南 萍乡北 青堆 长乐 江门 台州 衡水 湘潭北 闽清北 高邑西 盖州西 石柱县 潮汕 肇庆 泰康 邵东 湖州 余姚 平凉 宜宾 增城 沧州 都匀 防城港 鹰潭北 海东西 福田 余姚北 岳池 广州北 南安 蓬莱 瓦房店西 李石寨 葛店南 海安 无锡东 上饶 通辽 四会 桂林西 砀山南 兰州 滨海 龙口 绅坊 莱西 石林西 深圳 大连北 成都 上海西 孝感 杏树屯 德清 嘉兴

Copyright © 2016 phpStudy |