《JavaScript学徒》系列会以经典书籍为教材制作影片，和大家一起学习JavaScript。
本文同步发表于我的个人网站：ZackLive
这是《JavaScript学徒》系列的第七课，今天会进入《JavaScript DOM 编程艺术》第4章，这一章我们将完成一个图片库网页。这一课，我们先完成图片库的趋型，并学习事件处理函数的概念。
教学视频连结
事件处理函数
事件处理函数会在特定事件发生时触发，例如，当鼠标停在某个元素上时会触发onmouseover事件处理函数；鼠标离开时，又会触发onmouseout事件。在图片库中，我们会用到onclick事件，也就是点击事件。使用方法如下：
< a href="https://zacklive.com" onclick="showPic(this)">Click me < /a>
意思是，当有人点击这条连结时，执行showPic函数，并传入this作为参数，即这个a元素对象。
当这个函数执行完后，若返回true，则代表这条连结被点击了，即前往连结网址，窗口会被刷新；若返回false，则代表没被点击，没事发生。我们可以透过返回false，让窗口不刷新：
< a href="https://zacklive.com" onclick="showPic(this); return false;">Click me< /a>
图片库设计
“占位符（placeholder）”图片预留一个浏览区域。
图片连结被点击时，拦截网页的默认行为，即不前往连结地址（不刷新窗口）
图片连结被点击时，将placeholder图片换成该图片连结相对应的图片。
HTML与JavaScript
图片来自Unsplash，存放于images目录底下。
Placeholder图片来自PlaceHolder.com，这个网站让你透过连结产生占位符图片，连结格式：https://via.placeholder.com/widthxheight。
myScript.js
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
}
