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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 事件处理器作为浏览器对象的属性

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 109 ::

收藏到网摘: n/a

将事件处理器作为HTML标记的属性 Math对象应用详解

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

那么，BOM对象都具有哪些事件呢？

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

那么，事件对我们有什么用呢？

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

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

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

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

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

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

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

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

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

<html>

<body>

function linkSomePage_onclick()

{

alert('This link is going nowhere');

return false;

}

</script>

Click Me

</A>

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

</script>

</body>

</html>

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

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

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

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

document.links[0].onclick = linkSomePage_onclick;

</script>

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

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

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

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

<html>

<head>

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="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。

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

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

changeImg(1)">

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

将事件处理器作为HTML标记的属性 Math对象应用详解

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

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

评论 (0) All

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