《JavaScript DOM 编程艺术》07：事件处理函数

《JavaScript学徒》系列会以经典书籍为教材制作影片，和大家一起学习JavaScript。

本文同步发表于我的个人网站：ZackLive

这是《JavaScript学徒》系列的第七课，今天会进入《JavaScript DOM 编程艺术》第4章，这一章我们将完成一个图片库网页。这一课，我们先完成图片库的趋型，并学习事件处理函数的概念。

教学视频连结

YouTube

微博

B站

优酷

事件处理函数

事件处理函数会在特定事件发生时触发，例如，当鼠标停在某个元素上时会触发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

index.html

图片来自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);

}