将之前写过的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>