4.3　JavaScript函数的调用

我需要把刚编写出来showPic()函数与图片库HTML文档结合起来。最简单的办法是把这个函数用一组<script>标签插入到那个文档的<head>部分，但我认为这种做法有点儿目光短浅：如果今后想把这同一函数用在多个页面上的话，我将不得不反复多次地进行剪贴操作。为今后考虑，更有远见的办法是先把这个函数存入一个外部文件，然后在每一份需要用到这个函数的HTML文档的<head>部分插入一个链接来引用这个外部文件。

以.js作为文件扩展名，把这个函数存入一个文本文件。完全可以把这种文件命名为你们喜欢的任何东西，但我习惯于用这些文件所包含的函数的名字来命名它们——我给这个文件起的名字是showPic.js。

就像我刚才决定把所有的图片集中存放在images子目录里那样，把所有的JavaScript脚本文件集中存放在一个子目录里也将是个好主意。我创建了一个名为scripts的子目录并把showPic.js文件保存到其中。

现在，需要在图片库HTML文档里插入一个链接来引用这个JavaScript脚本文件。我将把下面这条语句插入那份HTML文档的<head>部分（选择的插入位置是<head>标签之后）：

有了这条语句，把showPic()函数与图片库HTML文档结合起来的任务就已经完成了一半——我还需要为HTML文档里的每个图片链接增加一个函数调用动作，否则showPic()函数将永远也不会被调用。我将通过增加一个事件处理函数（event handler）的办法来完成这项工作。

事件处理函数

事件处理函数的作用是，在预定事件发生时让预先安排好的JavaScript代码开始执行，用术语来说就是 “触发一个动作”。例如，如果想在鼠标指针悬停在某个元素上时触发一个动作，就需要使用onmouseover事件处理函数；如果想在鼠标指针离开某个元素时触发一个动作，就需要使用onmouseout事件处理函数。在“JavaScript美术馆”案例里，我想在用户点击某个链接时触发一个动作，所以需要使用onclick事件处理函数。

我想通过onclick事件处理函数去触发的动作是调用showPic()函数，而要想调用这个函数，就必须向它传递一个参数：一个带有href属性的元素节点。在图片库HTML文档里，当我把onclick事件处理函数嵌入一些链接时，我需要把那些链接本身用作showPic()函数的参数。

有个非常简单但又非常有效的办法可以做到这一点：使用JavaScript语言中的this关键字。这个关键字的含义是“这个对象”。具体到正在讨论的这个例子，我将使用this来表示“这个<a>元素节点”：

综上所述，我将使用onclick事件处理函数去调用showPic(this)方法。使用事件处理函数调用JavaScript代码的语法如下所示：

请注意，在如上所示的语法里，JavaScript代码是包含在一对引号之间的：我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。

下面这条语句将完成“使用onclick事件处理函数调用showPic(this)方法”的任务：

不过，如果只把上面这个事件处理函数插入到HTML文档中的链接里去的话，将遇到这样一个问题：在onclick事件发生时，不仅showPic(this)函数将被调用，链接被点击时的默认行为也将发生。这意味着用户还是会被带到另外一个图片查看窗口里去，而这是我不希望发生的事情。我需要阻止这种默认行为的发生。

要想达到这一目的，我们必须对事件处理函数的工作机制有进一步的了解：在给某个元素添加了事件处理函数后，一旦发生预定事件，相应的JavaScript代码就会得到执行；那些JavaScript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。例如，我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回给onclick事件处理函数的值是true，onclick事件处理函数将认为“这个链接被点击了”；反之，如果那段JavaScript代码返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个链接没有被点击”。

可以通过下面这个简单测试去验证这一结论：