JavaScript第四章：应用这个JavaScript函数

  将之前写过的JavaScript函数写入独立的.js文件，将它放入一个子目录scripts。

  在图片库文档中插入链接引入这个JavaScript脚本文件。

<script type="text/javascript" src="scripts/showPic.js"></script>

  接下来，我们要给图片列表的链接添加行为，也就是事件处理函数。

1.事件处理函数

     事件处理函数的作用：在特定事件发生时调用特定的JavaScript代码。

     onmouseover事件处理函数：鼠标指针悬停在某个元素触发一个动作

     onmouseout事件处理函数：鼠标指针离开某个元素触发一个动作

     onclick事件处理函数：用户点击某个链接触发一个动作

  

     showPic（）函数需要一个参数：一个带有href属性的元素节点参数。当我们把onclick事件处理函数嵌入一个链接中，需要将这个链接本身用作 showPic函数的参数。

     可以使用 this 关键字，表示“这个对象”。在本次例子中，this表示的是<a>元素节点

showPic(this);

    

     添加事件处理函数的语法：

 event="JavaScript statement(s)";

 onclick="showPic(this)";

    

     不过仅仅是时间处理函数放在图片列表的一个链接中，会遇到一个问题：点击这个链接时，不仅showPic函数被调用，链接被点击的默认行为也会被调用。

     事件处理函数的工作机制：在给某个函数添加了事件处理函数后，一旦事件发生，相应的JavaScript代码也会得到执行。被调用的JavaScript代码会返回一个值，这个值将会被传给那个时间处理函数。

     如上诉例子，如果JavaScript代码返回true：onclick事件处理函数被认为“这个链接被点击了”

                             如果JavaScript代码返回false：onclick事件处理函数被认为“这个链接没有被点击”

     因此只要在onclick事件处理函数中所触发的JavaScript代码里增加一条return false语句，就可以防止用户被带到目标链接窗口。

onclick="showPic(this);return false";

      接下来，我们要在图片列表的每个链接上添加这个事件处理函数。

    <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_1.jpg" onclick="showPic(this); return false;" title="JavaScript第三章图片1">Picture 1</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_2.jpg"  onclick="showPic(this); return false;"title="JavaScript第三章图片2">Picture 2</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_3.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片3">Picture 3</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_4.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片1">Picture 4</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_5.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片1">Picture 5</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_6.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片1">Picture 6</a>
    </li>